astro-tractstack 2.0.0-rc.0

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

@@ -0,0 +1,282 @@
+import { useState, useEffect, useMemo } from 'react';
+import { GOTO_TARGETS } from '@/constants';
+import ActionBuilderSlugSelector from './ActionBuilderSlugSelector';
+import type { FullContentMapItem } from '@/types/tractstack';
+
+interface ActionBuilderFieldProps {
+  value: string;
+  onChange: (value: string) => void;
+  contentMap: FullContentMapItem[];
+  label?: string;
+  error?: string;
+  slug?: string;
+}
+
+export default function ActionBuilderField({
+  value,
+  onChange,
+  contentMap,
+  label = 'Navigation Action',
+  error,
+  slug,
+}: ActionBuilderFieldProps) {
+  const [selectedTarget, setSelectedTarget] = useState<string>('');
+  const [selectedSubcommand, setSelectedSubcommand] = useState<string>('');
+  const [param1, setParam1] = useState<string>('');
+  const [param2, setParam2] = useState<string>('');
+  //const [param3, setParam3] = useState<string>('');
+
+  // Parse existing value on mount/change
+  useEffect(() => {
+    if (value) {
+      try {
+        const match = value.match(/\(goto\s+\(([^)]+)\)/);
+        if (match) {
+          const parts = match[1].split(' ').filter(Boolean);
+          if (parts.length > 0) {
+            setSelectedTarget(parts[0]);
+            if (GOTO_TARGETS[parts[0]]?.subcommands) {
+              if (parts.length > 1) setSelectedSubcommand(parts[1]);
+            } else {
+              if (parts.length > 1) setParam1(parts[1]);
+              if (parts.length > 2) setParam2(parts[2]);
+              //if (parts.length > 3) setParam3(parts[3]);
+            }
+          }
+        }
+      } catch (e) {
+        console.error('Error parsing action value:', e);
+      }
+    }
+  }, [value]);
+
+  const updateValue = (
+    target: string,
+    sub: string = '',
+    p1: string = '',
+    p2: string = '',
+    p3: string = ''
+  ) => {
+    let newValue = `(goto (${target}`;
+    if (GOTO_TARGETS[target]?.subcommands) {
+      if (sub) newValue += ` ${sub}`;
+    } else {
+      if (p1) newValue += ` ${p1}`;
+      if (p2) newValue += ` ${p2}`;
+      if (p3) newValue += ` ${p3}`;
+    }
+    newValue += '))';
+    onChange(newValue);
+  };
+
+  const targetOptions = useMemo(() => {
+    return Object.entries(GOTO_TARGETS).map(([key, data]) => ({
+      value: key,
+      label: data.name,
+    }));
+  }, []);
+
+  const subcommandOptions = useMemo(() => {
+    if (!selectedTarget || !GOTO_TARGETS[selectedTarget]?.subcommands) {
+      return [];
+    }
+    return GOTO_TARGETS[selectedTarget].subcommands!.map((cmd) => ({
+      value: cmd,
+      label: cmd,
+    }));
+  }, [selectedTarget]);
+
+  const handleTargetChange = (newTarget: string) => {
+    setSelectedTarget(newTarget);
+    setSelectedSubcommand('');
+    setParam1('');
+    setParam2('');
+    //setParam3('');
+    updateValue(newTarget);
+  };
+
+  const handleSubcommandChange = (newSubcommand: string) => {
+    setSelectedSubcommand(newSubcommand);
+    updateValue(selectedTarget, newSubcommand);
+  };
+
+  const renderParamInput = (paramType: 'param1' | 'param2') => {
+    const isParam1 = paramType === 'param1';
+    const currentValue = isParam1 ? param1 : param2;
+
+    switch (selectedTarget) {
+      case 'context':
+        return (
+          isParam1 && (
+            <ActionBuilderSlugSelector
+              type="context"
+              value={currentValue}
+              onSelect={(newValue) => {
+                setParam1(newValue);
+                updateValue(selectedTarget, '', newValue, param2);
+              }}
+              label="Select Context Pane"
+              contentMap={contentMap}
+            />
+          )
+        );
+
+      case 'storyFragment':
+        return (
+          isParam1 && (
+            <ActionBuilderSlugSelector
+              type="storyFragment"
+              value={currentValue}
+              onSelect={(newValue) => {
+                setParam1(newValue);
+                updateValue(selectedTarget, '', newValue);
+              }}
+              label="Select Story Fragment"
+              contentMap={contentMap}
+            />
+          )
+        );
+
+      case 'storyFragmentPane':
+        if (isParam1) {
+          return (
+            <ActionBuilderSlugSelector
+              type="storyFragment"
+              value={currentValue}
+              onSelect={(newValue) => {
+                setParam1(newValue);
+                setParam2(''); // Reset pane selection
+                updateValue(selectedTarget, '', newValue, '');
+              }}
+              label="Select Story Fragment"
+              contentMap={contentMap}
+            />
+          );
+        }
+        return (
+          !isParam1 &&
+          param1 && (
+            <ActionBuilderSlugSelector
+              type="pane"
+              value={currentValue}
+              onSelect={(newValue) => {
+                setParam2(newValue);
+                updateValue(selectedTarget, '', param1, newValue);
+              }}
+              label="Select Pane"
+              contentMap={contentMap}
+              parentSlug={param1}
+            />
+          )
+        );
+
+      case 'bunny':
+        if (isParam1 && slug) {
+          if (!currentValue) setParam1(slug);
+          return (
+            <ActionBuilderSlugSelector
+              type="storyFragment"
+              value={currentValue || slug}
+              onSelect={(newValue) => {
+                setParam1(newValue);
+                setParam2(''); // Reset time selection when story fragment changes
+                updateValue(selectedTarget, '', newValue, '');
+              }}
+              label="Select Story Fragment"
+              contentMap={contentMap}
+            />
+          );
+        }
+        return null;
+
+      case 'url':
+        return (
+          isParam1 && (
+            <div className="space-y-2">
+              <label className="block text-sm font-bold text-gray-700">
+                External URL
+              </label>
+              <input
+                type="text"
+                value={currentValue}
+                onChange={(e) => {
+                  const newValue = e.target.value;
+                  setParam1(newValue);
+                  updateValue(selectedTarget, '', newValue);
+                }}
+                placeholder="https://..."
+                className="w-full rounded-md border border-gray-300 px-3 py-2 shadow-sm focus:border-cyan-700 focus:ring-cyan-700"
+              />
+            </div>
+          )
+        );
+
+      default:
+        return null;
+    }
+  };
+
+  return (
+    <div className="space-y-4">
+      {label && (
+        <label className="block text-sm font-bold text-gray-700">{label}</label>
+      )}
+
+      {/* Target Selection */}
+      <div className="space-y-2">
+        <label className="block text-sm text-gray-700">Navigation Target</label>
+        <select
+          value={selectedTarget}
+          onChange={(e) => handleTargetChange(e.target.value)}
+          className="w-full rounded-md border border-gray-300 px-3 py-2 shadow-sm focus:border-cyan-700 focus:ring-cyan-700"
+        >
+          <option value="">Select a target...</option>
+          {targetOptions.map((option) => (
+            <option key={option.value} value={option.value}>
+              {option.label}
+            </option>
+          ))}
+        </select>
+
+        {GOTO_TARGETS[selectedTarget] && (
+          <p className="mt-1 text-sm text-gray-500">
+            {GOTO_TARGETS[selectedTarget].description}
+          </p>
+        )}
+      </div>
+
+      {/* Subcommand Selection */}
+      {selectedTarget && GOTO_TARGETS[selectedTarget]?.subcommands && (
+        <div className="space-y-2">
+          <label className="block text-sm text-gray-700">Section</label>
+          <select
+            value={selectedSubcommand}
+            onChange={(e) => handleSubcommandChange(e.target.value)}
+            className="w-full rounded-md border border-gray-300 px-3 py-2 shadow-sm focus:border-cyan-700 focus:ring-cyan-700"
+          >
+            <option value="">Select a section...</option>
+            {subcommandOptions.map((option) => (
+              <option key={option.value} value={option.value}>
+                {option.label}
+              </option>
+            ))}
+          </select>
+        </div>
+      )}
+
+      {/* Parameter 1 */}
+      {selectedTarget &&
+        GOTO_TARGETS[selectedTarget]?.requiresParam &&
+        !GOTO_TARGETS[selectedTarget].subcommands &&
+        renderParamInput('param1')}
+
+      {/* Parameter 2 */}
+      {selectedTarget &&
+        GOTO_TARGETS[selectedTarget]?.requiresSecondParam &&
+        param1 &&
+        renderParamInput('param2')}
+
+      {error && <p className="text-sm text-red-600">{error}</p>}
+    </div>
+  );
+}

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

@@ -0,0 +1,182 @@
+import { useMemo, useEffect, useRef, useState } 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 type { FullContentMapItem } from '@/types/tractstack';
+
+interface ActionBuilderSlugSelectorProps {
+  type: 'storyFragment' | 'context' | 'pane';
+  value: string;
+  onSelect: (value: string) => void;
+  query?: string;
+  setQuery?: (query: string) => void;
+  label: string;
+  placeholder?: string;
+  contentMap: FullContentMapItem[];
+  parentSlug?: string;
+}
+
+const ActionBuilderSlugSelector = ({
+  type,
+  value,
+  onSelect,
+  query: externalQuery,
+  setQuery: externalSetQuery,
+  label,
+  placeholder = 'Search...',
+  contentMap,
+  parentSlug,
+}: ActionBuilderSlugSelectorProps) => {
+  // Use internal query state if external query/setQuery not provided
+  const [internalQuery, setInternalQuery] = useState('');
+
+  // Determine which query and setQuery to use
+  const query = externalQuery !== undefined ? externalQuery : internalQuery;
+  const setQuery = externalSetQuery || setInternalQuery;
+
+  // Use a ref to track if the initial sync has occurred
+  const initialSyncDone = useRef(false);
+
+  // Filter items based on type and query
+  const filteredItems = useMemo(() => {
+    let items: FullContentMapItem[] = [];
+    switch (type) {
+      case 'storyFragment':
+        items = contentMap.filter((item) => item.type === 'StoryFragment');
+        break;
+      case 'context':
+        items = contentMap.filter(
+          (item) =>
+            item.type === 'Pane' && 'isContext' in item && item.isContext
+        );
+        break;
+      case 'pane': {
+        if (parentSlug) {
+          const parentFragment = contentMap.find(
+            (item) => item.type === 'StoryFragment' && item.slug === parentSlug
+          ) as (FullContentMapItem & { panes?: string[] }) | undefined;
+
+          if (parentFragment?.panes) {
+            items = contentMap.filter(
+              (item) =>
+                item.type === 'Pane' &&
+                'isContext' in item &&
+                !item.isContext &&
+                parentFragment.panes?.includes(item.id)
+            );
+          }
+        }
+        break;
+      }
+    }
+
+    return items.filter(
+      (item) =>
+        item.title.toLowerCase().includes(query.toLowerCase()) ||
+        item.slug.toLowerCase().includes(query.toLowerCase())
+    );
+  }, [contentMap, type, query, parentSlug]);
+
+  // Create collection
+  const collection = useMemo(() => {
+    return createListCollection({
+      items: filteredItems,
+      itemToValue: (item) => item.slug,
+      itemToString: (item) => `${item.title} (${item.slug})`,
+    });
+  }, [filteredItems]);
+
+  // Perform initial sync of value to query display
+  useEffect(() => {
+    // Only perform this sync once or when value changes
+    if (!initialSyncDone.current || (value && query === '')) {
+      initialSyncDone.current = true;
+
+      if (value) {
+        const selectedItem = contentMap.find((item) => item.slug === value);
+        if (selectedItem) {
+          // This won't cause an infinite loop because we're not including setQuery in dependencies
+          setQuery(`${selectedItem.title} (${selectedItem.slug})`);
+        }
+      }
+    }
+  }, [value, contentMap, query]);
+
+  const comboboxItemStyles = `
+    .slug-item[data-highlighted] {
+      background-color: #0891b2;
+      color: white;
+    }
+    .slug-item[data-highlighted] .slug-indicator {
+      color: white;
+    }
+    .slug-item[data-state="checked"] .slug-indicator {
+      display: flex;
+    }
+    .slug-item .slug-indicator {
+      display: none;
+    }
+    .slug-item[data-state="checked"] {
+      font-weight: bold;
+    }
+  `;
+
+  return (
+    <div className="space-y-2">
+      <style>{comboboxItemStyles}</style>
+      <label className="block text-sm text-gray-700">{label}</label>
+      <Combobox.Root
+        collection={collection}
+        value={value ? [value] : []}
+        inputValue={query}
+        onValueChange={(details) => {
+          const selectedValue = details.value[0] || '';
+          onSelect(selectedValue);
+        }}
+        onInputValueChange={(details) => {
+          setQuery(details.inputValue);
+        }}
+      >
+        <div className="relative">
+          <Combobox.Input
+            className="w-full rounded-md border border-gray-300 px-3 py-2 pr-10 shadow-sm focus:border-cyan-700 focus:ring-cyan-700"
+            placeholder={placeholder}
+          />
+          <Combobox.Trigger className="absolute inset-y-0 right-0 flex items-center pr-2">
+            <ChevronUpDownIcon
+              className="h-5 w-5 text-gray-400"
+              aria-hidden="true"
+            />
+          </Combobox.Trigger>
+        </div>
+
+        <Combobox.Content className="absolute z-10 mt-1 max-h-60 w-full max-w-md 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">
+          {filteredItems.length === 0 ? (
+            <div className="relative cursor-default select-none px-4 py-2 text-gray-700">
+              {query ? 'No matching items found' : 'No items available'}
+            </div>
+          ) : (
+            filteredItems.map((item) => (
+              <Combobox.Item
+                key={item.id}
+                item={item}
+                className="slug-item relative cursor-default select-none py-2 pl-10 pr-4 text-gray-900"
+              >
+                <span className="block truncate">
+                  {item.title}
+                  <span className="ml-2 text-sm opacity-60">({item.slug})</span>
+                </span>
+                <span className="slug-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>
+  );
+};
+
+export default ActionBuilderSlugSelector;

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

@@ -0,0 +1,94 @@
+import { Switch } from '@ark-ui/react/switch';
+import { classNames } from '@/utils/helpers';
+
+interface BooleanToggleProps {
+  value: boolean;
+  onChange: (value: boolean) => void;
+  label?: string;
+  error?: string;
+  disabled?: boolean;
+  description?: string;
+  required?: boolean;
+  className?: string;
+  size?: 'sm' | 'md' | 'lg';
+}
+
+const BooleanToggle = ({
+  value,
+  onChange,
+  label,
+  error,
+  disabled = false,
+  description,
+  required = false,
+  className,
+  size = 'md',
+}: BooleanToggleProps) => {
+  const handleCheckedChange = (details: { checked: boolean }) => {
+    onChange(details.checked);
+  };
+
+  // Simple inline styles for reliable animation
+  const controlStyle = {
+    width: size === 'sm' ? '28px' : size === 'lg' ? '44px' : '36px',
+    height: size === 'sm' ? '16px' : size === 'lg' ? '24px' : '20px',
+  };
+
+  const thumbStyle = {
+    width: size === 'sm' ? '12px' : size === 'lg' ? '20px' : '16px',
+    height: size === 'sm' ? '12px' : size === 'lg' ? '20px' : '16px',
+    transform: value
+      ? `translateX(${size === 'sm' ? '12px' : size === 'lg' ? '20px' : '16px'})`
+      : 'translateX(0px)',
+    transition: 'transform 0.2s ease-in-out',
+  };
+
+  return (
+    <div className={classNames('space-y-2', className || '')}>
+      <Switch.Root
+        checked={value}
+        onCheckedChange={handleCheckedChange}
+        disabled={disabled}
+      >
+        <div className="flex items-center space-x-3">
+          <Switch.Control
+            className={classNames(
+              'relative inline-flex items-center rounded-full border-2 border-transparent focus:outline-none focus:ring-2 focus:ring-cyan-500 focus:ring-offset-2',
+              value ? 'bg-cyan-600' : 'bg-gray-200',
+              disabled ? 'cursor-not-allowed opacity-50' : 'cursor-pointer'
+            )}
+            style={controlStyle}
+          >
+            <Switch.Thumb
+              className="rounded-full bg-white shadow-lg"
+              style={thumbStyle}
+            />
+          </Switch.Control>
+
+          {(label || description) && (
+            <div className="flex-1">
+              {label && (
+                <Switch.Label className="block cursor-pointer text-sm font-bold text-gray-700">
+                  {label}
+                  {required && <span className="ml-1 text-red-500">*</span>}
+                </Switch.Label>
+              )}
+              {description && (
+                <p className="mt-1 text-sm text-gray-500">{description}</p>
+              )}
+            </div>
+          )}
+        </div>
+        <Switch.HiddenInput />
+      </Switch.Root>
+
+      {error && (
+        <p className="text-sm text-red-600" role="alert">
+          {error}
+        </p>
+      )}
+    </div>
+  );
+};
+
+export default BooleanToggle;