astro-tractstack 2.0.0-rc.0

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

@@ -0,0 +1,192 @@
+import { useState, useCallback } from 'react';
+import { useStore } from '@nanostores/react';
+import BackgroundImage from './BackgroundImage';
+import ArtpackImage from './ArtpackImage';
+import ColorPickerCombo from './ColorPickerCombo';
+import { getCtx } from '@/stores/nodes';
+import { hasArtpacksStore } from '@/stores/storykeep';
+import { cloneDeep } from '@/utils/helpers';
+import type { BrandConfig } from '@/types/tractstack';
+import type {
+  BgImageNode,
+  ArtpackImageNode,
+  PaneNode,
+} from '@/types/compositorTypes';
+import { isArtpackImageNode } from '@/utils/compositor/typeGuards';
+
+export interface BackgroundImageWrapperProps {
+  paneId: string;
+  config?: BrandConfig;
+}
+
+const BackgroundImageWrapper = ({
+  paneId,
+  config,
+}: BackgroundImageWrapperProps) => {
+  const ctx = getCtx();
+  const allNodes = useStore(ctx.allNodes);
+  const $artpacks = useStore(hasArtpacksStore);
+  const hasArtpacks = $artpacks && Object.keys($artpacks).length > 0;
+
+  // State to force re-renders when child components need it
+  const [, setUpdateCounter] = useState(0);
+
+  // Using useCallback to create a stable reference to the update function
+  const onUpdate = useCallback(() => {
+    setUpdateCounter((prev) => prev + 1);
+  }, []);
+
+  const bgNode = (() => {
+    const paneNode = allNodes.get(paneId) as PaneNode;
+    if (!paneNode) return null;
+    const childNodeIds = ctx.getChildNodeIDs(paneNode.id);
+    const bgNodes = childNodeIds
+      .map((id) => allNodes.get(id))
+      .filter(
+        (node) =>
+          node?.nodeType === 'BgPane' &&
+          'type' in node &&
+          (node.type === 'background-image' || node.type === 'artpack-image')
+      ) as (BgImageNode | ArtpackImageNode)[];
+    return bgNodes[0] || null;
+  })();
+
+  const handleColorChange = (color: string) => {
+    const paneNode = allNodes.get(paneId) as PaneNode;
+    if (!paneNode) return;
+    const updatedPaneNode = cloneDeep(paneNode);
+    if (color) updatedPaneNode.bgColour = color;
+    else if (typeof updatedPaneNode.bgColour === `string` && !color)
+      delete updatedPaneNode.bgColour;
+    updatedPaneNode.isChanged = true;
+    ctx.modifyNodes([updatedPaneNode]);
+  };
+
+  const handlePositionChange = (
+    newPosition: 'background' | 'left' | 'right' | 'leftBleed' | 'rightBleed'
+  ) => {
+    if (!bgNode) return;
+    const updatedBgNode = cloneDeep(bgNode);
+    updatedBgNode.position = newPosition;
+    updatedBgNode.isChanged = true;
+    const updatedPaneNode = cloneDeep(allNodes.get(paneId) as PaneNode);
+    updatedPaneNode.isChanged = true;
+    ctx.modifyNodes([updatedBgNode, updatedPaneNode]);
+    onUpdate();
+  };
+
+  const handleSizeChange = (newSize: 'equal' | 'narrow' | 'wide') => {
+    if (!bgNode) return;
+    const updatedBgNode = cloneDeep(bgNode);
+    updatedBgNode.size = newSize;
+    updatedBgNode.isChanged = true;
+    const updatedPaneNode = cloneDeep(allNodes.get(paneId) as PaneNode);
+    updatedPaneNode.isChanged = true;
+    ctx.modifyNodes([updatedBgNode, updatedPaneNode]);
+    onUpdate();
+  };
+
+  const position = bgNode?.position || 'background';
+  const size = bgNode?.size || 'equal';
+
+  return (
+    <div className="w-full space-y-6">
+      <h3 className="text-sm font-bold text-gray-700">Background</h3>
+
+      <ColorPickerCombo
+        title="Pane Background Color"
+        defaultColor={(allNodes.get(paneId) as PaneNode)?.bgColour || ''}
+        onColorChange={handleColorChange}
+        config={config!}
+        allowNull={true}
+      />
+      {!bgNode && (
+        <div className="flex flex-col gap-4 sm:flex-row">
+          <div className="flex-1">
+            <h4 className="mb-2 text-sm font-bold text-gray-700">
+              Background Image
+            </h4>
+            <BackgroundImage paneId={paneId} onUpdate={onUpdate} />
+            {hasArtpacks && (
+              <ArtpackImage paneId={paneId} onUpdate={onUpdate} />
+            )}
+          </div>
+        </div>
+      )}
+      {bgNode && (
+        <div className="w-full space-y-6">
+          {/* Position Toggle */}
+          <div className="space-y-2">
+            <label className="block text-sm font-bold text-gray-700">
+              Position
+            </label>
+            <div className="flex space-x-4">
+              {(
+                [
+                  'background',
+                  'left',
+                  'right',
+                  'leftBleed',
+                  'rightBleed',
+                ] as const
+              ).map((pos) => (
+                <label key={pos} className="inline-flex items-center">
+                  <input
+                    type="radio"
+                    name="position"
+                    value={pos}
+                    checked={position === pos}
+                    onChange={() => handlePositionChange(pos)}
+                    className="text-myblue focus:ring-myblue h-4 w-4 border-gray-300"
+                  />
+                  <span className="ml-2 text-sm capitalize text-gray-700">
+                    {pos}
+                  </span>
+                </label>
+              ))}
+            </div>
+          </div>
+
+          {/* Size Toggle - Only show when position is left or right */}
+          {position !== 'background' && (
+            <div className="space-y-2">
+              <label className="block text-sm font-bold text-gray-700">
+                Size
+              </label>
+              <div className="flex space-x-4">
+                {(['equal', 'narrow', 'wide'] as const).map((s) => (
+                  <label key={s} className="inline-flex items-center">
+                    <input
+                      type="radio"
+                      name="size"
+                      value={s}
+                      checked={size === s}
+                      onChange={() => handleSizeChange(s)}
+                      className="text-myblue focus:ring-myblue h-4 w-4 border-gray-300"
+                    />
+                    <span className="ml-2 text-sm capitalize text-gray-700">
+                      {s === 'narrow'
+                        ? 'Narrow (1/3)'
+                        : s === 'wide'
+                          ? 'Wide (2/3)'
+                          : 'Equal (1/2)'}
+                    </span>
+                  </label>
+                ))}
+              </div>
+            </div>
+          )}
+
+          {/* Render the appropriate image component */}
+          {isArtpackImageNode(bgNode) ? (
+            <ArtpackImage paneId={paneId} onUpdate={onUpdate} />
+          ) : (
+            <BackgroundImage paneId={paneId} onUpdate={onUpdate} />
+          )}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default BackgroundImageWrapper;

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

@@ -0,0 +1,67 @@
+import { useState, useEffect } from 'react';
+import { Switch } from '@ark-ui/react';
+import { classNames } from '@/utils/helpers';
+
+interface BooleanParamProps {
+  label: string;
+  value: boolean;
+  onChange: (checked: boolean) => void;
+  disabled?: boolean;
+}
+
+function BooleanParam({
+  label,
+  value,
+  onChange,
+  disabled = false,
+}: BooleanParamProps) {
+  const [enabled, setEnabled] = useState(value);
+
+  useEffect(() => {
+    setEnabled(value);
+  }, [value]);
+
+  const handleToggle = (checked: boolean) => {
+    if (!disabled) {
+      setEnabled(checked);
+      onChange(checked);
+    }
+  };
+
+  return (
+    <div className="space-y-1">
+      <div className="flex items-center justify-between">
+        <Switch.Root
+          checked={enabled}
+          onCheckedChange={(details) => handleToggle(details.checked)}
+          disabled={disabled}
+          className="inline-flex items-center"
+        >
+          <Switch.Control
+            className={classNames(
+              enabled ? 'bg-cyan-700' : 'bg-gray-300',
+              disabled ? 'cursor-not-allowed opacity-50' : 'cursor-pointer',
+              'relative inline-flex h-6 w-11 flex-shrink-0 items-center rounded-full transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-cyan-500 focus:ring-offset-2'
+            )}
+          >
+            <Switch.Thumb
+              className={classNames(
+                enabled ? 'translate-x-6' : 'translate-x-1',
+                'inline-block h-4 w-4 rounded-full bg-white transition-transform duration-200 ease-in-out'
+              )}
+            />
+          </Switch.Control>
+          <Switch.HiddenInput />
+          <div className="ml-4 flex h-6 items-center">
+            <Switch.Label className="text-sm leading-none text-gray-600">
+              {label}
+            </Switch.Label>
+          </div>
+        </Switch.Root>
+      </div>
+      <div className="text-xs text-gray-500">{enabled ? 'Enabled' : 'Off'}</div>
+    </div>
+  );
+}
+
+export default BooleanParam;

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

@@ -0,0 +1,56 @@
+import { useState, useEffect } from 'react';
+import ActionBuilderTimeSelector from './ActionBuilderTimeSelector';
+
+interface BunnyMomentSelectorProps {
+  value: string;
+  onChange: (value: string) => void;
+}
+
+export default function BunnyMomentSelector({
+  value,
+  onChange,
+}: BunnyMomentSelectorProps) {
+  const [selectedVideoId, setSelectedVideoId] = useState('');
+  const [timestamp, setTimestamp] = useState('0');
+
+  useEffect(() => {
+    if (value) {
+      try {
+        const match = value.match(
+          /\(bunnyMoment\s+\(\s*([^\s]+)\s+(\d+)\s*\)\)/
+        );
+        if (match) {
+          setSelectedVideoId(match[1]);
+          setTimestamp(match[2]);
+        }
+      } catch (e) {
+        console.error('Error parsing value:', e);
+      }
+    }
+  }, [value]);
+
+  const handleTimeSelect = (time: string, videoId?: string) => {
+    if (videoId) {
+      setSelectedVideoId(videoId);
+    }
+    setTimestamp(time);
+    updateValue(videoId || selectedVideoId, time);
+  };
+
+  const updateValue = (videoId: string, time: string) => {
+    if (!videoId) return;
+    onChange(`(bunnyMoment (${videoId} ${time}))`);
+  };
+
+  return (
+    <div className="space-y-4">
+      <ActionBuilderTimeSelector
+        value={timestamp}
+        videoId={selectedVideoId}
+        onSelect={handleTimeSelect}
+        label="Bunny Video Moment"
+        placeholder="Select a video and timestamp"
+      />
+    </div>
+  );
+}

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

@@ -0,0 +1,284 @@
+import { useState, useCallback, useMemo, useEffect, useRef } from 'react';
+import { Combobox } from '@ark-ui/react';
+import { createListCollection } from '@ark-ui/react/collection';
+import ChevronUpDownIcon from '@heroicons/react/24/outline/ChevronUpDownIcon';
+import XMarkIcon from '@heroicons/react/24/outline/XMarkIcon';
+import CheckIcon from '@heroicons/react/24/outline/CheckIcon';
+import {
+  hexToTailwind,
+  tailwindToHex,
+  getTailwindColorOptions,
+  findClosestTailwindColor,
+  getComputedColor,
+} from '@/utils/compositor/tailwindColors';
+import { debounce, useDropdownDirection } from '@/utils/helpers';
+import type { BrandConfig } from '@/types/tractstack';
+
+export interface ColorPickerProps {
+  title: string;
+  config: BrandConfig;
+  defaultColor: string;
+  onColorChange: (color: string) => void;
+  skipTailwind?: boolean;
+  allowNull?: boolean;
+}
+
+const ColorPickerCombo = ({
+  title,
+  defaultColor,
+  onColorChange,
+  config,
+  skipTailwind = false,
+  allowNull = false,
+}: ColorPickerProps) => {
+  const [hexColor, setHexColor] = useState(defaultColor);
+  const initialTailwindColor = skipTailwind
+    ? ''
+    : hexToTailwind(defaultColor, config.BRAND_COLOURS) || '';
+  const [selectedTailwindColor, setSelectedTailwindColor] =
+    useState(initialTailwindColor);
+  const [query, setQuery] = useState('');
+  const [initialRender, setInitialRender] = useState(true);
+
+  // Add ref and useDropdownDirection hook
+  const comboboxRef = useRef<HTMLDivElement>(null);
+  const { openAbove, maxHeight } = useDropdownDirection(comboboxRef);
+
+  // Get all available Tailwind color options
+  const allTailwindColorOptions = useMemo(() => {
+    return getTailwindColorOptions();
+  }, []);
+
+  // Filter colors based on search query
+  const filteredColors = useMemo(() => {
+    return query === ''
+      ? allTailwindColorOptions
+      : allTailwindColorOptions.filter((color) =>
+          color.toLowerCase().includes(query.toLowerCase())
+        );
+  }, [allTailwindColorOptions, query]);
+
+  // Create collection for combobox
+  const collection = useMemo(() => {
+    // Make sure all tailwind colors are included in the collection
+    const items = [...allTailwindColorOptions];
+
+    // Ensure the initial color is in the collection if it exists
+    if (initialTailwindColor && !items.includes(initialTailwindColor)) {
+      items.push(initialTailwindColor);
+    }
+
+    return createListCollection({
+      items,
+    });
+  }, [allTailwindColorOptions, initialTailwindColor]);
+
+  // Set default value during initial render
+  useEffect(() => {
+    if (initialRender && initialTailwindColor) {
+      setInitialRender(false);
+    }
+  }, [initialRender, initialTailwindColor]);
+
+  // Handle hex color picker changes
+  const handleHexColorChange = useCallback(
+    debounce((newHexColor: string) => {
+      const computedColor = getComputedColor(newHexColor);
+      setHexColor(computedColor);
+
+      if (!skipTailwind) {
+        const exactTailwindColor = hexToTailwind(
+          computedColor,
+          config.BRAND_COLOURS
+        );
+        if (exactTailwindColor) {
+          setSelectedTailwindColor(exactTailwindColor);
+          setQuery('');
+        } else {
+          const closestColor = findClosestTailwindColor(computedColor);
+          if (closestColor) {
+            const tailwindClass = `${closestColor.name}-${closestColor.shade}`;
+            setSelectedTailwindColor(tailwindClass);
+            setQuery('');
+          } else {
+            setSelectedTailwindColor('');
+            setQuery('');
+          }
+        }
+      }
+
+      onColorChange(computedColor);
+    }, 16),
+    [onColorChange, skipTailwind, config.BRAND_COLOURS]
+  );
+
+  // Handle Tailwind color selection
+  const handleTailwindColorChange = useCallback(
+    (details: { value: string[] }) => {
+      if (skipTailwind) return;
+
+      const newTailwindColor = details.value[0] || '';
+      setSelectedTailwindColor(newTailwindColor);
+      setQuery(''); // Clear query after selection
+
+      const newHexColor = getComputedColor(
+        tailwindToHex(`bg-${newTailwindColor}`, config.BRAND_COLOURS || null)
+      );
+      setHexColor(newHexColor);
+      onColorChange(newHexColor);
+    },
+    [onColorChange, config, skipTailwind]
+  );
+
+  // New function to handle color removal
+  const handleRemoveColor = useCallback(() => {
+    setHexColor('');
+    setSelectedTailwindColor('');
+    setQuery('');
+    onColorChange('');
+  }, [onColorChange]);
+
+  const handleInputChange = useCallback(
+    (details: Combobox.InputValueChangeDetails) => {
+      setQuery(details.inputValue);
+    },
+    []
+  );
+
+  // CSS to properly style the combobox items with hover and selection
+  const comboboxItemStyles = `
+    .color-item[data-highlighted] {
+      background-color: #0891b2; /* bg-cyan-600 */
+      color: white;
+    }
+    .color-item[data-highlighted] .color-indicator {
+      color: white !important;
+    }
+    .color-item[data-state="checked"] .color-indicator {
+      display: flex;
+    }
+    .color-item .color-indicator {
+      display: none;
+    }
+    .color-item[data-state="checked"] {
+      font-weight: bold;
+    }
+  `;
+
+  return (
+    <div>
+      {title && (
+        <span className="text-mydarkgrey block py-2 text-sm">{title}</span>
+      )}
+      <div className="flex items-center space-x-2">
+        {allowNull && !hexColor ? (
+          // Show empty state with angled stripes pattern when allowNull is true and no color is set
+          <div className="border-mydarkgrey relative h-9 w-12 overflow-hidden rounded">
+            {/* Angled stripes pattern to represent transparency */}
+            <div
+              className="absolute inset-0"
+              style={{
+                background: `repeating-linear-gradient(
+            45deg,
+            #f3f4f6 0px,
+            #f3f4f6 4px,
+            #e5e7eb 4px,
+            #e5e7eb 8px
+          )`,
+              }}
+            />
+            {/* Hidden color input for when user clicks to set a color */}
+            <input
+              type="color"
+              value="#ffffff"
+              onChange={(e) => handleHexColorChange(e.target.value)}
+              className="absolute inset-0 cursor-pointer opacity-0"
+              title="Click to set a color"
+            />
+          </div>
+        ) : (
+          <input
+            type="color"
+            value={hexColor || '#ffffff'}
+            onChange={(e) => handleHexColorChange(e.target.value)}
+            className="border-mydarkgrey h-9 w-12 rounded"
+          />
+        )}
+        {allowNull && (
+          <button
+            onClick={handleRemoveColor}
+            className="border-mydarkgrey flex h-9 w-9 items-center justify-center rounded"
+          >
+            <XMarkIcon className="text-mydarkgrey h-5 w-5" aria-hidden="true" />
+          </button>
+        )}
+        {!skipTailwind && (
+          <div className="flex-grow">
+            <style>{comboboxItemStyles}</style>
+            {/* Drop down menu for tailwind colors */}
+            <Combobox.Root
+              collection={collection}
+              defaultValue={initialTailwindColor ? [initialTailwindColor] : []}
+              value={selectedTailwindColor ? [selectedTailwindColor] : []}
+              onValueChange={handleTailwindColorChange}
+              onInputValueChange={handleInputChange}
+              selectionBehavior="replace"
+            >
+              <div ref={comboboxRef} className="relative max-w-48">
+                <Combobox.Input
+                  className="border-mydarkgrey focus:border-myblue focus:ring-myblue xs:text-sm w-full rounded-md py-2 pl-3 pr-10 shadow-sm"
+                  placeholder="Search Tailwind colors..."
+                  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>
+                <Combobox.Content
+                  className={`xs:text-sm absolute z-10 mt-1 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none ${
+                    openAbove ? 'bottom-full mb-1' : 'top-full'
+                  }`}
+                  style={{ maxHeight }}
+                >
+                  {filteredColors.length === 0 ? (
+                    <div className="relative cursor-default select-none py-2 pl-3 pr-4 text-black">
+                      Nothing found.
+                    </div>
+                  ) : (
+                    filteredColors.map((color) => (
+                      <Combobox.Item
+                        key={color}
+                        item={color}
+                        className="color-item relative cursor-default select-none py-2 pl-3 pr-4"
+                      >
+                        <div className="flex items-center">
+                          <div
+                            className="mr-3 h-6 w-6 flex-shrink-0 rounded"
+                            style={{
+                              backgroundColor: tailwindToHex(
+                                `bg-${color}`,
+                                config.BRAND_COLOURS || null
+                              ),
+                            }}
+                          />
+                          <span className="block truncate">{color}</span>
+                          <span className="color-indicator absolute inset-y-0 right-0 flex items-center pr-3 text-cyan-600">
+                            <CheckIcon className="h-5 w-5" aria-hidden="true" />
+                          </span>
+                        </div>
+                      </Combobox.Item>
+                    ))
+                  )}
+                </Combobox.Content>
+              </div>
+            </Combobox.Root>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default ColorPickerCombo;