astro-tractstack 2.0.0-rc.0

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

@@ -0,0 +1,296 @@
+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 images
+const IMAGE_STYLES = [
+  { key: 'objectFIT', title: 'Object Fit' },
+  { key: 'maxH', title: 'Max Height' },
+  { key: 'maxW', title: 'Max Width' },
+  { key: 'aspectRATIO', title: 'Aspect Ratio' },
+  { key: 'rounded', title: 'Border Radius' },
+  { key: 'shadow', title: 'Box Shadow' },
+  { key: 'borderSTYLE', title: 'Border Style' },
+  { key: 'borderCOLOR', title: 'Border Color' },
+  { key: 'borderWIDTH', title: 'Border Width' },
+];
+
+// Recommended styles for image 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));
+};
+
+const StyleImagePanelAdd = ({ 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 isImage = node.tagName === 'img';
+
+  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));
+    });
+  }
+
+  // Create collection for combobox with filtered styles
+  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(() => {
+    return createListCollection({
+      items: filteredStyles,
+      itemToValue: (item) => item.key,
+      itemToString: (item) => item.title,
+    });
+  }, [filteredStyles]);
+
+  // Get appropriate recommended styles based on element type
+  const recommendedStyles = isOuterContainer
+    ? OUTER_CONTAINER_STYLES
+    : isContainer
+      ? CONTAINER_STYLES
+      : IMAGE_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-img-outer-update'
+          : isContainer
+            ? 'style-img-container-update'
+            : 'style-img-update',
+        nodeId: node.id,
+        childId, // Preserve childId for container context
+        className: styleKey,
+        expanded: true,
+      });
+    },
+    [node.id, childId, isOuterContainer, isContainer, isImage]
+  );
+
+  const handleCancel = () => {
+    // Return to main panel with correct context
+    settingsPanelStore.set({
+      action: 'style-image',
+      nodeId: childId || node.id, // Use childId when available for context
+      expanded: true,
+    });
+  };
+
+  const elementTypeTitle = isOuterContainer
+    ? 'Outer Container'
+    : isContainer
+      ? 'Container'
+      : 'Image';
+
+  // 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 StyleImagePanelAdd;

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

@@ -0,0 +1,153 @@
+import { settingsPanelStore } from '@/stores/storykeep';
+import { getCtx } from '@/stores/nodes';
+import { tailwindClasses } from '@/utils/compositor/tailwindClasses';
+import type { FlatNode, BasePanelProps } from '@/types/compositorTypes';
+import { isMarkdownPaneFragmentNode } from '@/utils/compositor/typeGuards';
+import { cloneDeep } from '@/utils/helpers';
+
+const StyleImageRemovePanel = ({
+  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'
+      : 'Image';
+
+  const resetStore = () => {
+    if (node?.id)
+      settingsPanelStore.set({
+        action: 'style-image',
+        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 parentNodeClone = cloneDeep(parentNode);
+
+    if (!targetNode || !parentNodeClone) return;
+
+    // Remove from defaultClasses if present
+    if (parentNodeClone.defaultClasses?.[targetNode.tagName]) {
+      const defaultClasses = parentNodeClone.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 },
+      { ...parentNodeClone, 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 StyleImageRemovePanel;