astro-tractstack 2.0.0-rc.0

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

@@ -0,0 +1,134 @@
+import { useState, 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 DevicePhoneMobileIcon from '@heroicons/react/24/outline/DevicePhoneMobileIcon';
+import DeviceTabletIcon from '@heroicons/react/24/outline/DeviceTabletIcon';
+import ComputerDesktopIcon from '@heroicons/react/24/outline/ComputerDesktopIcon';
+import { SvgBreaks } from '@/constants/shapes';
+
+interface Props {
+  viewport: 'mobile' | 'tablet' | 'desktop';
+  selectedImage: string;
+  onChange: (image: string) => void;
+}
+
+export default function PaneBreakShapeSelector({
+  viewport,
+  selectedImage,
+  onChange,
+}: Props) {
+  const availableShapes = [
+    'none',
+    ...Object.keys(SvgBreaks).map((key) => key.replace('kCz', '')),
+  ];
+  const [query, setQuery] = useState('');
+
+  const collection = useMemo(() => {
+    return createListCollection({
+      items: availableShapes,
+      itemToValue: (item) => item,
+      itemToString: (item) => item,
+    });
+  }, [availableShapes]);
+
+  const Icon =
+    viewport === 'mobile'
+      ? DevicePhoneMobileIcon
+      : viewport === 'tablet'
+        ? DeviceTabletIcon
+        : ComputerDesktopIcon;
+
+  const renderShapePreview = (shape: string) => {
+    if (shape === 'none') return null;
+
+    const fullShapeName = `kCz${shape}`;
+    if (!SvgBreaks[fullShapeName]) return null;
+
+    const svgData = SvgBreaks[fullShapeName];
+    return (
+      <div className="flex w-[150px] items-center justify-center">
+        <svg
+          viewBox={`0 0 ${svgData.viewBox[0]} ${svgData.viewBox[1]}`}
+          className="h-auto w-full"
+          preserveAspectRatio="xMidYMid meet"
+        >
+          <path d={svgData.path} fill="currentColor" />
+        </svg>
+      </div>
+    );
+  };
+
+  // CSS to properly style the combobox items with hover and selection
+  const comboboxItemStyles = `
+    .shape-item[data-highlighted] {
+      background-color: #0891b2; /* bg-cyan-600 */
+      color: white;
+    }
+    .shape-item[data-highlighted] .shape-indicator {
+      color: white;
+    }
+    .shape-item[data-state="checked"] .shape-indicator {
+      display: flex;
+    }
+    .shape-item .shape-indicator {
+      display: none;
+    }
+    .shape-item[data-state="checked"] {
+      font-weight: bold;
+    }
+  `;
+
+  return (
+    <div className="relative flex items-center space-x-2">
+      <style>{comboboxItemStyles}</style>
+      <Icon className="h-6 w-6 flex-shrink-0" aria-hidden="true" />
+
+      <Combobox.Root
+        collection={collection}
+        value={[selectedImage]}
+        defaultValue={[selectedImage]}
+        defaultInputValue={selectedImage}
+        inputValue={query || selectedImage}
+        onValueChange={(details) => onChange(details.value[0])}
+        onInputValueChange={(details) => setQuery(details.inputValue)}
+        loopFocus={true}
+        openOnKeyPress={true}
+        composite={true}
+      >
+        <div className="relative mt-1 flex-grow">
+          <div className="border-mydarkgrey focus-within:border-myblue focus-within:ring-myblue flex w-full items-center rounded-md border shadow-sm">
+            <Combobox.Input
+              className="xs:text-sm w-full rounded-l-md border-0 py-2 pl-3 pr-0 focus:ring-0"
+              autoComplete="off"
+            />
+            <div className="py-2 pr-8">{renderShapePreview(selectedImage)}</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>
+        </div>
+
+        <Combobox.Content className="xs:text-sm absolute z-10 mt-1 max-h-60 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.map((shape) => (
+            <Combobox.Item
+              key={shape}
+              item={shape}
+              className="shape-item relative flex cursor-default select-none items-center py-2 pl-10 pr-4"
+            >
+              <span className="mr-2 block truncate">{shape}</span>
+              {renderShapePreview(shape)}
+              <span className="shape-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>
+  );
+}

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

@@ -0,0 +1,44 @@
+import XMarkIcon from '@heroicons/react/24/outline/XMarkIcon';
+import { tailwindClasses } from '@/utils/compositor/tailwindClasses';
+
+interface Props {
+  name: string;
+  values: {
+    mobile: string;
+    tablet?: string;
+    desktop?: string;
+  };
+  onRemove: (name: string) => void;
+  onUpdate: (name: string) => void;
+}
+
+const SelectedTailwindClass = ({ name, values, onRemove, onUpdate }: Props) => {
+  const entries = Object.entries(values).filter(([, value]) => value);
+
+  const title =
+    entries.length === 1 && entries[0][0] === 'mobile'
+      ? entries[0][1]
+      : entries
+          .map(([viewport, value]) => `${viewport[0]}:${value}`)
+          .join(', ');
+
+  return (
+    <div className="text-myblack hover:bg-mygreen/20 w-fit rounded border border-slate-200 p-2 text-sm">
+      <div title={title} className="flex items-center gap-2 font-bold">
+        <button onClick={() => onUpdate(name)}>
+          {tailwindClasses[name]?.title || name}
+        </button>
+        <button
+          onClick={() => onRemove(name)}
+          className="rounded-full p-0.5 transition-colors hover:bg-slate-100"
+          aria-label={`Remove ${name} class`}
+          title={`Remove ${tailwindClasses[name]?.title || name} class`}
+        >
+          <XMarkIcon className="text-mydarkgrey h-4 w-4 hover:font-bold hover:text-black" />
+        </button>
+      </div>
+    </div>
+  );
+};
+
+export default SelectedTailwindClass;

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

@@ -0,0 +1,73 @@
+interface SingleParamProps {
+  label: string;
+  value: string;
+  onChange: (value: string) => void;
+  placeholder?: string;
+  disabled?: boolean;
+}
+
+function SingleParam({
+  label,
+  value,
+  onChange,
+  placeholder,
+  disabled = false,
+}: SingleParamProps) {
+  return (
+    <div className="space-y-1">
+      <label className="block text-sm text-gray-600">{label}</label>
+      <div
+        contentEditable={!disabled}
+        onBlur={(e) => {
+          const newValue = e.currentTarget.textContent || '';
+          // Strip out newlines and pipe characters
+          const sanitizedValue = newValue.replace(/[\n\r|]/g, '');
+          onChange(sanitizedValue);
+        }}
+        onKeyDown={(e) => {
+          // Make Enter trigger blur (apply changes)
+          if (e.key === 'Enter') {
+            e.preventDefault();
+            e.currentTarget.blur();
+          }
+
+          // Prevent pipe character
+          if (e.key === '|') {
+            e.preventDefault();
+          }
+        }}
+        onPaste={(e) => {
+          e.preventDefault();
+          // Get the clipboard data
+          const clipboardData = e.clipboardData;
+          let pastedText = clipboardData.getData('text');
+
+          // Clean the pasted text
+          pastedText = pastedText.replace(/[\n\r|]/g, '');
+
+          // Insert at cursor position using the modern Selection and Range API
+          const selection = window.getSelection();
+          if (selection && selection.rangeCount > 0) {
+            const range = selection.getRangeAt(0);
+            range.deleteContents();
+            const textNode = document.createTextNode(pastedText);
+            range.insertNode(textNode);
+
+            // Move cursor to end of inserted text
+            range.setStartAfter(textNode);
+            range.setEndAfter(textNode);
+            selection.removeAllRanges();
+            selection.addRange(range);
+          }
+        }}
+        className={`rounded-md border-0 px-2.5 py-1.5 text-gray-900 ring-1 ring-inset ${disabled ? 'bg-gray-100 text-gray-500' : 'ring-gray-300 focus:ring-2 focus:ring-cyan-700'}`}
+        style={{ minHeight: '1em' }}
+        suppressContentEditableWarning
+      >
+        {value || placeholder}
+      </div>
+    </div>
+  );
+}
+
+export default SingleParam;

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

@@ -0,0 +1,252 @@
+import {
+  useRef,
+  useState,
+  useEffect,
+  useCallback,
+  useMemo,
+  type ChangeEvent,
+} from 'react';
+import { Combobox } 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';
+import DevicePhoneMobileIcon from '@heroicons/react/24/outline/DevicePhoneMobileIcon';
+import DeviceTabletIcon from '@heroicons/react/24/outline/DeviceTabletIcon';
+import ComputerDesktopIcon from '@heroicons/react/24/outline/ComputerDesktopIcon';
+import { classNames } from '@/utils/helpers';
+import { tailwindToHex, colorValues } from '@/utils/compositor/tailwindColors';
+import type { BrandConfig } from '@/types/tractstack';
+
+interface ViewportComboBoxProps {
+  value: string;
+  onFinalChange: (
+    value: string,
+    viewport: 'mobile' | 'tablet' | 'desktop',
+    isNegative?: boolean
+  ) => void;
+  values: string[];
+  viewport: 'mobile' | 'tablet' | 'desktop';
+  allowNegative?: boolean;
+  isNegative?: boolean;
+  isInferred?: boolean;
+  config: BrandConfig;
+}
+
+const ViewportComboBox = ({
+  value,
+  onFinalChange,
+  values,
+  viewport,
+  allowNegative = false,
+  isNegative = false,
+  isInferred = false,
+  config,
+}: ViewportComboBoxProps) => {
+  const [internalValue, setInternalValue] = useState(value);
+  const [query, setQuery] = useState('');
+  const [isNowNegative, setIsNowNegative] = useState(isNegative);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  const Icon =
+    viewport === 'mobile'
+      ? DevicePhoneMobileIcon
+      : viewport === 'tablet'
+        ? DeviceTabletIcon
+        : ComputerDesktopIcon;
+
+  useEffect(() => {
+    if (value !== internalValue) {
+      setInternalValue(value);
+      setQuery('');
+    }
+    if (isNegative !== isNowNegative) {
+      setIsNowNegative(isNegative);
+    }
+  }, [value, isNegative]);
+
+  // Create collection for combobox
+  const collection = useMemo(() => {
+    const filteredValues =
+      query === ''
+        ? values
+        : values.filter((item) =>
+            item.toLowerCase().includes(query.toLowerCase())
+          );
+
+    return createListCollection({
+      items: filteredValues,
+      itemToValue: (item) => item,
+      itemToString: (item) => item,
+    });
+  }, [values, query]);
+
+  const handleNegativeChange = useCallback(
+    (event: ChangeEvent<HTMLInputElement>) => {
+      setIsNowNegative(event.target.checked);
+      onFinalChange(internalValue, viewport, event.target.checked);
+    },
+    [internalValue, onFinalChange, viewport]
+  );
+
+  const handleInputChange = useCallback(
+    (details: Combobox.InputValueChangeDetails) => {
+      setQuery(details.inputValue);
+    },
+    []
+  );
+
+  const handleValueChange = useCallback(
+    (details: { value: string[] }) => {
+      const selectedValue = details.value[0] || '';
+      setInternalValue(selectedValue);
+      setQuery('');
+      onFinalChange(selectedValue, viewport, isNowNegative);
+    },
+    [onFinalChange, viewport, isNowNegative]
+  );
+
+  const handleBlur = useCallback(() => {
+    if (values.includes(internalValue)) {
+      onFinalChange(internalValue, viewport, isNowNegative);
+    } else {
+      setInternalValue(value);
+    }
+    setQuery('');
+  }, [internalValue, value, values, onFinalChange, viewport, isNowNegative]);
+
+  const isColorValue = colorValues.includes(internalValue);
+
+  // CSS to properly style the combobox items with hover and selection
+  const comboboxItemStyles = `
+    .viewport-item[data-highlighted] {
+      background-color: #0891b2; /* bg-cyan-600 */
+      color: white;
+    }
+    .viewport-item[data-highlighted] .viewport-indicator {
+      color: white;
+    }
+    .viewport-item[data-state="checked"] .viewport-indicator {
+      display: flex;
+    }
+    .viewport-item .viewport-indicator {
+      display: none;
+    }
+    .viewport-item[data-state="checked"] {
+      font-weight: bold;
+    }
+  `;
+
+  return (
+    <div
+      className="relative flex max-w-md flex-nowrap items-center"
+      title={`Value on ${viewport} Screens`}
+    >
+      <style>{comboboxItemStyles}</style>
+      <Icon className="mr-2 h-8 w-8" aria-hidden="true" />
+      <div className="relative w-full">
+        <div className="flex items-center">
+          <div className="relative flex-grow">
+            <Combobox.Root
+              collection={collection}
+              value={[internalValue]}
+              onValueChange={handleValueChange}
+              onInputValueChange={handleInputChange}
+              loopFocus={true}
+              openOnKeyPress={true}
+              composite={true}
+            >
+              <div className="relative">
+                <div className="relative flex items-center">
+                  {isColorValue && (
+                    <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(
+                          internalValue,
+                          config.BRAND_COLOURS || null
+                        ),
+                      }}
+                    />
+                  )}
+                  <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',
+                      isColorValue ? 'pl-12' : 'pl-3',
+                      'pr-16'
+                    )}
+                    onBlur={handleBlur}
+                    autoComplete="off"
+                  />
+                  <Combobox.Trigger className="absolute inset-y-0 right-0 flex items-center pl-2 pr-2">
+                    <ChevronUpDownIcon
+                      className="text-mydarkgrey h-5 w-5"
+                      aria-hidden="true"
+                    />
+                  </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>
+                      </div>
+                    </Combobox.Item>
+                  ))
+                )}
+              </Combobox.Content>
+            </Combobox.Root>
+          </div>
+          {allowNegative && (
+            <div className="ml-2 flex items-center">
+              <input
+                type="checkbox"
+                id={`negative-${viewport}`}
+                checked={isNowNegative}
+                onChange={handleNegativeChange}
+                className="border-mydarkgrey h-4 w-4 rounded text-cyan-600 focus:ring-cyan-600"
+              />
+              <label
+                htmlFor={`negative-${viewport}`}
+                className="ml-2 block text-sm text-black"
+              >
+                Negative
+              </label>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ViewportComboBox;