astro-tractstack 2.0.0-rc.0

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

@@ -0,0 +1,292 @@
+import { useState, useCallback, 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 { settingsPanelStore } from '@/stores/storykeep';
+import { getCtx } from '@/stores/nodes';
+import { tailwindClasses } from '@/utils/compositor/tailwindClasses';
+import { isMarkdownPaneFragmentNode } from '@/utils/compositor/typeGuards';
+import type { BasePanelProps } from '@/types/compositorTypes';
+
+// Recommended styles for widget containers (li)
+const CONTAINER_STYLES = [
+  { key: 'bgCOLOR', title: 'Background Color' },
+  { key: 'borderCOLOR', title: 'Border Color' },
+  { key: 'borderSTYLE', title: 'Border Style' },
+  { key: 'borderWIDTH', title: 'Border Width' },
+  { key: 'rounded', title: 'Border Radius' },
+  { key: 'shadow', title: 'Box Shadow' },
+  { key: 'p', title: 'Padding' },
+  { key: 'px', title: 'Padding X' },
+  { key: 'py', title: 'Padding Y' },
+  { key: 'm', title: 'Margin' },
+  { key: 'mx', title: 'Margin X' },
+  { key: 'my', title: 'Margin Y' },
+];
+
+// Recommended styles for outer containers (ul/ol)
+const OUTER_CONTAINER_STYLES = [
+  { key: 'bgCOLOR', title: 'Background Color' },
+  { key: 'maxW', title: 'Max Width' },
+  { key: 'rounded', title: 'Border Radius' },
+  { key: 'shadow', title: 'Box Shadow' },
+  { key: 'p', title: 'Padding' },
+  { key: 'm', title: 'Margin' },
+  { key: 'gap', title: 'Gap Between Items' },
+  { key: 'columns', title: 'Column Layout' },
+];
+
+const getFilteredStyles = (
+  showAdvanced: boolean,
+  existingClasses: Set<string>
+) => {
+  return Object.entries(tailwindClasses)
+    .filter(
+      ([key, details]) =>
+        (showAdvanced || details.priority <= 1) && !existingClasses.has(key)
+    )
+    .map(([key, details]) => ({
+      key,
+      title: details.title,
+      className: details.className,
+      prefix: details.prefix,
+      values: details.values,
+    }))
+    .sort((a, b) => a.title.localeCompare(b.title));
+};
+
+interface StyleOption {
+  key: string;
+  title: string;
+  className: string;
+  prefix: string;
+  values: string[];
+}
+
+const StyleWidgetPanelAdd = ({ node, parentNode, childId }: BasePanelProps) => {
+  const [query, setQuery] = useState('');
+  const [showAdvanced, setShowAdvanced] = useState(false);
+  const [selectedStyle, setSelectedStyle] = useState<string | null>(null);
+
+  if (!node?.tagName || !parentNode || !isMarkdownPaneFragmentNode(parentNode))
+    return null;
+
+  const isOuterContainer = node.tagName === 'ul' || node.tagName === 'ol';
+  const isContainer = node.tagName === 'li';
+  const isWidget = node.tagName === 'code';
+
+  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));
+    if (defaults.tablet)
+      Object.keys(defaults.tablet).forEach((key) => currentClasses.add(key));
+    if (defaults.desktop)
+      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));
+    });
+  }
+
+  const styles = getFilteredStyles(showAdvanced, currentClasses);
+  const filteredStyles =
+    query === ''
+      ? styles
+      : styles.filter(
+          (style) =>
+            style.title.toLowerCase().includes(query.toLowerCase()) ||
+            style.key.toLowerCase().includes(query.toLowerCase())
+        );
+
+  // Create collection for Ark UI Combobox
+  const collection = useMemo(
+    () =>
+      createListCollection({
+        items: filteredStyles,
+        itemToValue: (item: StyleOption) => item.key,
+        itemToString: (item: StyleOption) => item.title,
+      }),
+    [filteredStyles]
+  );
+
+  // Get appropriate recommended styles based on element type
+  const recommendedStyles = isOuterContainer
+    ? OUTER_CONTAINER_STYLES
+    : isContainer
+      ? CONTAINER_STYLES
+      : [];
+
+  const availableRecommendedStyles = recommendedStyles.filter(
+    (style) => !currentClasses.has(style.key)
+  );
+
+  const handleSelect = useCallback(
+    (details: { value: string[] }) => {
+      const styleKey = details.value[0] || '';
+      if (!styleKey) return;
+
+      setSelectedStyle(styleKey);
+      settingsPanelStore.set({
+        action: isOuterContainer
+          ? 'style-code-outer-update'
+          : isContainer
+            ? 'style-code-container-update'
+            : 'style-code-update',
+        nodeId: node.id,
+        childId, // Preserve childId for container context
+        className: styleKey,
+        expanded: true,
+      });
+    },
+    [node.id, childId, isOuterContainer, isContainer, isWidget]
+  );
+
+  const handleCancel = () => {
+    // Return to main panel with correct context
+    settingsPanelStore.set({
+      action: 'style-widget',
+      nodeId: childId || node.id, // Use childId when available for context
+      expanded: true,
+    });
+  };
+
+  const elementTypeTitle = isOuterContainer
+    ? 'Outer Container'
+    : isContainer
+      ? '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 */
+      color: white;
+    }
+    .style-item[data-highlighted] .style-indicator {
+      color: white;
+    }
+    .style-item[data-state="checked"] .style-indicator {
+      display: flex;
+    }
+    .style-item .style-indicator {
+      display: none;
+    }
+    .style-item[data-state="checked"] {
+      font-weight: bold;
+    }
+  `;
+
+  return (
+    <div className="min-h-[400px] max-w-md space-y-4">
+      <style>{comboboxItemStyles}</style>
+
+      <div className="flex flex-row flex-nowrap justify-between">
+        <h3 className="text-xl font-bold">Add Style ({elementTypeTitle})</h3>
+        <button
+          title="Return to preview pane"
+          onClick={handleCancel}
+          className="text-myblue hover:text-black"
+        >
+          Go Back
+        </button>
+      </div>
+
+      <div className="mb-4 flex items-center gap-2">
+        <input
+          type="checkbox"
+          id="show-advanced"
+          checked={showAdvanced}
+          onChange={(e) => setShowAdvanced(e.target.checked)}
+          className="border-mydarkgrey h-4 w-4 rounded text-cyan-600 focus:ring-cyan-600"
+        />
+        <label htmlFor="show-advanced" className="text-mydarkgrey text-sm">
+          Show Advanced Styles
+        </label>
+      </div>
+
+      <div className="relative w-full">
+        <Combobox.Root
+          collection={collection}
+          value={selectedStyle ? [selectedStyle] : []}
+          onValueChange={handleSelect}
+          loopFocus={true}
+          openOnKeyPress={true}
+          composite={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.Trigger>
+          </div>
+
+          <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>
+        </Combobox.Root>
+      </div>
+
+      {availableRecommendedStyles.length > 0 && (
+        <div className="mt-8">
+          <h3 className="mb-3 text-lg font-bold">Recommended Styles</h3>
+          <div className="flex flex-wrap gap-2">
+            {availableRecommendedStyles.map((style) => (
+              <button
+                key={style.key}
+                onClick={() => handleSelect({ value: [style.key] })}
+                className="hover:bg-mygreen/20 inline-flex items-center rounded-md bg-slate-50 px-3 py-2 text-sm text-black transition-colors duration-200"
+              >
+                <span className="font-bold">{style.title}</span>
+              </button>
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default StyleWidgetPanelAdd;

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

@@ -0,0 +1,190 @@
+import { useEffect, useState } from 'react';
+import { getCtx } from '@/stores/nodes';
+import { cloneDeep } from '@/utils/helpers';
+import { widgetMeta } from '@/constants';
+import SingleParam from '@/components/fields/SingleParam';
+import BooleanParam from '@/components/fields/BooleanParam';
+import MultiParam from '@/components/fields/MultiParam';
+import BeliefWidget from '@/components/edit/widgets/BeliefWidget';
+import BunnyWidget from '@/components/edit/widgets/BunnyWidget';
+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 type { FlatNode } from '@/types/compositorTypes';
+
+interface StyleWidgetConfigPanelProps {
+  node: FlatNode;
+}
+
+function StyleWidgetConfigPanel({ node }: StyleWidgetConfigPanelProps) {
+  const [init, setInit] = useState(false);
+
+  useEffect(() => {
+    if (!init) setInit(true);
+  }, []);
+
+  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;
+
+  const widgetType = hookMatch[1];
+  const widgetInfo = widgetMeta[widgetType];
+
+  // If widget is not found in widgetMeta, display error message
+  if (!widgetInfo) {
+    return (
+      <div className="rounded-md bg-red-50 p-4 text-red-800">
+        Widget type '{widgetType}' not found in configuration. Please check the
+        widget type.
+      </div>
+    );
+  }
+
+  // Get params from node and ensure they match the expected count from metadata
+  const existingParams = node.codeHookParams?.map((p) => String(p)) || [];
+  const expectedParamCount = widgetInfo.parameters.length;
+
+  // Ensure params array is the right length with default values if needed
+  const params = Array(expectedParamCount)
+    .fill('')
+    .map((_, index) => {
+      if (
+        index < existingParams.length &&
+        existingParams[index] !== undefined
+      ) {
+        return existingParams[index];
+      }
+      return widgetInfo.parameters[index].defaultValue;
+    });
+
+  const handleParamUpdate = (updatedParams: string[]) => {
+    if (!init) return;
+
+    // Create a copy of the node to avoid direct mutation
+    const newNode = cloneDeep(node);
+
+    // Ensure all parameters are strings
+    const stringParams = updatedParams.map((param) => String(param));
+
+    // Update the codeHookParams
+    newNode.codeHookParams = stringParams;
+
+    // Update the copy field to match the new params
+    newNode.copy = `${widgetType}(${stringParams.join('|')})`;
+
+    // Mark the node as changed
+    newNode.isChanged = true;
+
+    // Update the node in the store
+    getCtx().modifyNodes([newNode]);
+  };
+
+  // Specialized widget editors for specific widget types
+  const specializedEditors = {
+    belief: () => <BeliefWidget node={node} onUpdate={handleParamUpdate} />,
+    bunny: () => <BunnyWidget node={node} onUpdate={handleParamUpdate} />,
+    identifyAs: () => (
+      <IdentifyAsWidget node={node} onUpdate={handleParamUpdate} />
+    ),
+    signup: () => <SignupWidget node={node} onUpdate={handleParamUpdate} />,
+    toggle: () => <ToggleWidget node={node} onUpdate={handleParamUpdate} />,
+    youtube: () => <YouTubeWidget node={node} onUpdate={handleParamUpdate} />,
+  };
+
+  // Generic parameter editor for widget types without specific editors
+  const GenericParamEditor = () => (
+    <div className="space-y-4">
+      {widgetInfo.parameters.map((param, index) => {
+        const paramValue = params[index] || param.defaultValue;
+
+        switch (param.type) {
+          case 'boolean':
+            return (
+              <BooleanParam
+                key={index}
+                label={param.label}
+                value={paramValue === 'true'}
+                onChange={(value) => {
+                  const newParams = [...params];
+                  newParams[index] = value ? 'true' : 'false';
+                  handleParamUpdate(newParams);
+                }}
+              />
+            );
+          case 'multi-string':
+            return (
+              <MultiParam
+                key={index}
+                label={param.label}
+                values={paramValue ? paramValue.split(',').filter(Boolean) : []}
+                onChange={(values) => {
+                  const newParams = [...params];
+                  newParams[index] = values.join(',');
+                  handleParamUpdate(newParams);
+                }}
+              />
+            );
+          case 'scale':
+            // Scale parameters have special rendering requirements but still use string storage
+            return (
+              <SingleParam
+                key={index}
+                label={param.label}
+                value={paramValue}
+                disabled={true}
+                onChange={(value) => {
+                  const newParams = [...params];
+                  newParams[index] = value;
+                  handleParamUpdate(newParams);
+                }}
+              />
+            );
+          case 'string':
+          default:
+            return (
+              <SingleParam
+                key={index}
+                label={param.label}
+                value={paramValue}
+                onChange={(value) => {
+                  const newParams = [...params];
+                  newParams[index] = value;
+                  handleParamUpdate(newParams);
+                }}
+              />
+            );
+        }
+      })}
+    </div>
+  );
+
+  // Render the editor (either specialized or generic)
+  const renderEditor = () => {
+    // Check if we have a specialized editor for this widget type
+    if (widgetType in specializedEditors) {
+      return specializedEditors[
+        widgetType as keyof typeof specializedEditors
+      ]();
+    }
+
+    // Fall back to generic editor
+    return <GenericParamEditor />;
+  };
+
+  return (
+    <div className="space-y-4">
+      <h3 className="text-lg font-bold">{widgetInfo.title}</h3>
+      <p className="text-sm text-gray-600">
+        Configure the parameters for this {widgetType} widget.
+      </p>
+      {renderEditor()}
+    </div>
+  );
+}
+
+export default StyleWidgetConfigPanel;

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

@@ -0,0 +1,152 @@
+import { settingsPanelStore } from '@/stores/storykeep';
+import { getCtx } from '@/stores/nodes';
+import { tailwindClasses } from '@/utils/compositor/tailwindClasses';
+import { isMarkdownPaneFragmentNode } from '@/utils/compositor/typeGuards';
+import { cloneDeep } from '@/utils/helpers';
+import type { BasePanelProps, FlatNode } from '@/types/compositorTypes';
+
+const StyleWidgetRemovePanel = ({
+  node,
+  parentNode,
+  className,
+  childId,
+}: BasePanelProps) => {
+  if (
+    !className ||
+    !node?.tagName ||
+    !parentNode ||
+    !isMarkdownPaneFragmentNode(parentNode)
+  ) {
+    return null;
+  }
+  const friendlyName = tailwindClasses[className]?.title || className;
+  const isOuterContainer = node.tagName === 'ul' || node.tagName === 'ol';
+  const isContainer = node.tagName === 'li';
+
+  const elementTypeTitle = isOuterContainer
+    ? 'Outer Container'
+    : isContainer
+      ? 'Container'
+      : 'Widget';
+
+  const resetStore = () => {
+    if (node?.id)
+      settingsPanelStore.set({
+        action: 'style-widget',
+        nodeId: isOuterContainer || isContainer ? childId || node.id : node.id,
+        expanded: true,
+      });
+  };
+
+  const handleYesClick = () => {
+    if (!node || !className) {
+      console.error('Missing required properties for class removal');
+      return;
+    }
+
+    const ctx = getCtx();
+    const allNodes = ctx.allNodes.get();
+
+    const targetNode = cloneDeep(allNodes.get(node.id)) as FlatNode;
+    const deepParentClone = cloneDeep(parentNode);
+
+    if (!targetNode) return;
+
+    // Remove from defaultClasses if present
+    if (deepParentClone.defaultClasses?.[targetNode.tagName]) {
+      const defaultClasses = deepParentClone.defaultClasses[targetNode.tagName];
+      if (className in defaultClasses.mobile)
+        delete defaultClasses.mobile[className];
+      if (className in defaultClasses.tablet)
+        delete defaultClasses.tablet[className];
+      if (className in defaultClasses.desktop)
+        delete defaultClasses.desktop[className];
+    }
+
+    // Remove from overrideClasses if present
+    if (targetNode.overrideClasses) {
+      if (
+        targetNode.overrideClasses.mobile &&
+        className in targetNode.overrideClasses.mobile
+      ) {
+        delete targetNode.overrideClasses.mobile[className];
+      }
+      if (
+        targetNode.overrideClasses.tablet &&
+        className in targetNode.overrideClasses.tablet
+      ) {
+        delete targetNode.overrideClasses.tablet[className];
+      }
+      if (
+        targetNode.overrideClasses.desktop &&
+        className in targetNode.overrideClasses.desktop
+      ) {
+        delete targetNode.overrideClasses.desktop[className];
+      }
+
+      // If there are no overrides left, remove the overrideClasses object
+      const overrides =
+        `overrideClasses` in targetNode && targetNode.overrideClasses;
+      const hasRemainingOverrides =
+        (overrides &&
+          `mobile` in overrides &&
+          typeof overrides.mobile !== `undefined` &&
+          Object.keys(overrides.mobile).length > 0) ||
+        (overrides &&
+          `tablet` in overrides &&
+          typeof overrides.tablet !== `undefined` &&
+          Object.keys(overrides.tablet).length > 0) ||
+        (overrides &&
+          `desktop` in overrides &&
+          typeof overrides.desktop !== `undefined` &&
+          Object.keys(overrides.desktop).length > 0);
+
+      if (!hasRemainingOverrides) {
+        delete targetNode.overrideClasses;
+      }
+    }
+    ctx.modifyNodes([
+      { ...targetNode, isChanged: true },
+      { ...deepParentClone, isChanged: true },
+    ]);
+    resetStore();
+  };
+
+  const handleNoClick = () => {
+    resetStore();
+  };
+
+  return (
+    <div className="space-y-4">
+      <h3 className="text-xl font-bold">
+        Remove <span className="font-bold">{friendlyName}</span>
+        <span className="ml-1">from {elementTypeTitle}?</span>
+      </h3>
+      <div className="space-y-4 rounded bg-slate-50 p-6">
+        <ul className="text-mydarkgrey flex flex-wrap gap-x-4 gap-y-1">
+          <li>
+            <em>Are you sure?</em>
+          </li>
+          <li>
+            <button
+              onClick={handleYesClick}
+              className="font-bold underline hover:text-black"
+            >
+              Yes
+            </button>
+          </li>
+          <li>
+            <button
+              onClick={handleNoClick}
+              className="font-bold underline hover:text-black"
+            >
+              No / Cancel
+            </button>
+          </li>
+        </ul>
+      </div>
+    </div>
+  );
+};
+
+export default StyleWidgetRemovePanel;