astro-tractstack 2.3.4 → 2.4.0

package/templates/custom/with-examples/ProductCard.astro

@@ -1,29 +0,0 @@
----
-import type { ResourceNode } from '@/types/compositorTypes';
-
-export interface Props {
-  product?: ResourceNode;
-}
-
-const { product } = Astro.props;
----
-
-<div class="rounded-lg border bg-white p-6 shadow-sm">
-  <h2 class="mb-4 text-xl font-bold text-gray-900">
-    Product Card (Parameter Dump)
-  </h2>
-
-  {
-    product ? (
-      <pre class="whitespace-pre-wrap rounded-md bg-gray-50 p-4 text-xs text-gray-700">
-        {JSON.stringify(product, null, 2)}
-      </pre>
-    ) : (
-      <div class="rounded-md bg-red-50 p-4 text-center">
-        <p class="font-bold text-red-800">
-          Error: ProductCard component received no product data.
-        </p>
-      </div>
-    )
-  }
-</div>

package/templates/custom/with-examples/ProductCardWrapper.astro

@@ -1,43 +0,0 @@
----
-import type { ResourceNode } from '@/types/compositorTypes';
-import ProductCard from './ProductCard.astro';
-
-export interface Props {
-  options?: {
-    params?: {
-      options?: string;
-    };
-  };
-  resourcesPayload?: Record<string, ResourceNode[]>;
-}
-
-const { options, resourcesPayload } = Astro.props;
-
-let product: ResourceNode | undefined = undefined;
-let parsedOptions: { slug?: string } = {};
-
-if (options?.params?.options && typeof options.params.options === 'string') {
-  try {
-    parsedOptions = JSON.parse(options.params.options);
-  } catch (e) {
-    console.error('Failed to parse ProductCard options JSON:', e);
-  }
-}
-
-const targetSlug = parsedOptions?.slug;
-
-if (targetSlug && resourcesPayload) {
-  for (const key in resourcesPayload) {
-    const resourceArray = resourcesPayload[key] as ResourceNode[];
-    const found = resourceArray.find(
-      (resource) => resource.slug === targetSlug
-    );
-    if (found) {
-      product = found;
-      break;
-    }
-  }
-}
----
-
-<ProductCard product={product} />

package/templates/custom/with-examples/ProductGrid.astro

@@ -1,64 +0,0 @@
----
-import type { ResourceNode } from '@/types/compositorTypes';
-import ProductCard from './ProductCard.astro';
-
-export interface Props {
-  options?: {
-    params?: {
-      options?: string;
-    };
-  };
-  resourcesPayload?: Record<string, ResourceNode[]>;
-}
-
-const { options, resourcesPayload } = Astro.props;
-
-let productsToDisplay: ResourceNode[] = [];
-let allFetchedProducts: ResourceNode[] = [];
-let parsedOptions: { productType?: string; category?: string; slugs?: string } =
-  {};
-
-if (options?.params?.options && typeof options.params.options === 'string') {
-  try {
-    parsedOptions = JSON.parse(options.params.options);
-  } catch (e) {
-    console.error('Failed to parse ProductGrid options JSON:', e);
-  }
-}
-
-if (resourcesPayload) {
-  for (const key in resourcesPayload) {
-    allFetchedProducts = resourcesPayload[key] as ResourceNode[];
-    break;
-  }
-}
-
-if (parsedOptions?.productType) {
-  productsToDisplay = allFetchedProducts.filter(
-    (product) =>
-      product.optionsPayload?.productType === parsedOptions.productType
-  );
-} else {
-  productsToDisplay = allFetchedProducts;
-}
----
-
-<div class="space-y-6">
-  {
-    productsToDisplay.length > 0 ? (
-      <div class="grid grid-cols-1 gap-6 md:grid-cols-2 xl:grid-cols-3">
-        {productsToDisplay.map((product) => (
-          <ProductCard product={product} />
-        ))}
-      </div>
-    ) : (
-      <div class="rounded-lg border bg-yellow-50 p-6 text-center shadow-sm">
-        <p class="font-bold text-yellow-800">No products to display.</p>
-        <p class="mt-1 text-sm text-yellow-700">
-          Check the grid configuration or ensure products match the specified
-          filters.
-        </p>
-      </div>
-    )
-  }
-</div>

package/templates/src/components/codehooks/ProductCardSetup.tsx

@@ -1,157 +0,0 @@
-import { useState, useMemo } from 'react';
-import { Combobox } from '@ark-ui/react/combobox';
-import { Portal } from '@ark-ui/react/portal';
-import { createListCollection } from '@ark-ui/react/collection';
-import { useStore } from '@nanostores/react';
-import { fullContentMapStore } from '@/stores/storykeep';
-import { getCtx } from '@/stores/nodes';
-import type { PaneNode } from '@/types/compositorTypes';
-
-const productCardComboItemHighlightStyles = `
-  .product-card-combo-item[data-highlighted] {
-    background-color: #0891b2;
-    color: #fff;
-  }
-`;
-
-interface ProductCardSetupProps {
-  nodeId: string;
-  params: Record<string, any> | null;
-}
-
-export const ProductCardSetup = (props: ProductCardSetupProps) => {
-  const { nodeId, params } = props;
-  const ctx = getCtx();
-  const $contentMap = useStore(fullContentMapStore);
-
-  const [showSelector, setShowSelector] = useState(false);
-
-  const products = useMemo(() => {
-    return $contentMap
-      .filter(
-        (item) => item.type === 'Resource' && item.categorySlug === 'product'
-      )
-      .map((item) => ({ label: item.title, value: item.slug }));
-  }, [$contentMap]);
-
-  const productCollection = useMemo(() => {
-    return createListCollection({
-      items: products,
-      itemToValue: (item) => item.value,
-      itemToString: (item) => item.label,
-    });
-  }, [products]);
-
-  const [selectedItem, setSelectedItem] = useState<{
-    label: string;
-    value: string;
-  } | null>(() => {
-    const currentSlug = params?.slug;
-    if (currentSlug) {
-      return products.find((p) => p.value === currentSlug) || null;
-    }
-    return null;
-  });
-
-  const updatePayload = (newPayload: Record<string, any>) => {
-    const paneNode = ctx.allNodes.get().get(nodeId) as PaneNode;
-    if (!paneNode) return;
-
-    const updatedPaneNode = {
-      ...paneNode,
-      codeHookPayload: {
-        target: paneNode.codeHookPayload?.target,
-        options: JSON.stringify(newPayload),
-      },
-    };
-    ctx.modifyNodes([updatedPaneNode]);
-  };
-
-  const handleSelect = (details: { value: string[] }) => {
-    const slug = details.value[0];
-    const selected = products.find((p) => p.value === slug);
-    if (selected) {
-      setSelectedItem(selected);
-      updatePayload({ slug: selected.value });
-      setShowSelector(false);
-    }
-  };
-
-  const handleClear = () => {
-    setSelectedItem(null);
-    updatePayload({});
-  };
-
-  return (
-    <div className="space-y-4 p-2">
-      <h3 className="font-bold text-gray-800">Product Card Configuration</h3>
-
-      <div className="rounded-md border bg-gray-50 p-3">
-        <div className="flex items-center justify-between">
-          <div>
-            <p className="text-sm font-bold text-gray-600">Selected Product</p>
-            <p className="truncate font-bold text-gray-900">
-              {selectedItem ? selectedItem.label : 'None'}
-            </p>
-          </div>
-          <div className="flex gap-x-2">
-            <button
-              type="button"
-              onClick={() => setShowSelector(!showSelector)}
-              className="rounded bg-white px-3 py-1 text-sm font-bold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50"
-            >
-              {showSelector ? 'Cancel' : 'Change'}
-            </button>
-            <button
-              type="button"
-              onClick={handleClear}
-              className="rounded bg-white px-3 py-1 text-sm font-bold text-red-600 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50"
-              disabled={!selectedItem}
-            >
-              Clear
-            </button>
-          </div>
-        </div>
-      </div>
-
-      {showSelector && (
-        <div className="space-y-2 rounded-md border p-3">
-          <Combobox.Root
-            collection={productCollection}
-            onValueChange={handleSelect}
-            lazyMount
-            unmountOnExit
-          >
-            <Combobox.Label className="text-sm font-bold text-gray-700">
-              Find a product
-            </Combobox.Label>
-            <style>{productCardComboItemHighlightStyles}</style>
-            <Combobox.Control>
-              <Combobox.Input
-                className="w-full rounded-md border-gray-300 px-3 py-2 shadow-sm focus:border-cyan-500 focus:ring-cyan-500 md:text-sm"
-                placeholder="Search products..."
-              />
-            </Combobox.Control>
-            <Portal>
-              <Combobox.Positioner>
-                <Combobox.Content className="z-50 max-h-60 overflow-y-auto rounded-md border bg-white shadow-lg">
-                  {products.map((item) => (
-                    <Combobox.Item
-                      key={item.value}
-                      item={item}
-                      className="product-card-combo-item relative cursor-pointer select-none px-4 py-2 text-gray-900"
-                    >
-                      <Combobox.ItemText>{item.label}</Combobox.ItemText>
-                    </Combobox.Item>
-                  ))}
-                </Combobox.Content>
-              </Combobox.Positioner>
-            </Portal>
-          </Combobox.Root>
-        </div>
-      )}
-    </div>
-  );
-};
-
-export default ProductCardSetup;

package/templates/src/components/codehooks/ProductGridSetup.tsx

@@ -1,279 +0,0 @@
-import { useState, useMemo, useEffect, useRef } from 'react';
-import {
-  RadioGroup,
-  type RadioGroup as RadioGroupNamespace,
-} from '@ark-ui/react/radio-group';
-import { Combobox } from '@ark-ui/react/combobox';
-import { Portal } from '@ark-ui/react/portal';
-import { createListCollection } from '@ark-ui/react/collection';
-import { useStore } from '@nanostores/react';
-import { fullContentMapStore } from '@/stores/storykeep';
-import { getCtx } from '@/stores/nodes';
-import CheckCircleIcon from '@heroicons/react/20/solid/CheckCircleIcon';
-import type { PaneNode } from '@/types/compositorTypes';
-
-interface ProductGridSetupProps {
-  nodeId: string;
-  params: Record<string, any> | null;
-}
-
-const modes = [
-  {
-    id: 'all',
-    title: 'All Products',
-    description: 'Display all products from the catalog.',
-  },
-  {
-    id: 'type',
-    title: 'By Product Type',
-    description: 'Filter products by a specific type.',
-  },
-  {
-    id: 'specific',
-    title: 'Specific Products',
-    description: 'Manually select individual products.',
-  },
-];
-
-const productGridComboItemHighlightStyles = `
-  .product-grid-combo-item[data-highlighted] {
-    background-color: #0891b2;
-    color: #fff;
-  }
-`;
-
-export const ProductGridSetup = (props: ProductGridSetupProps) => {
-  const { nodeId, params } = props;
-  const ctx = getCtx();
-  const $contentMap = useStore(fullContentMapStore);
-  const isInitialMount = useRef(true);
-
-  const products = useMemo(() => {
-    return $contentMap
-      .filter(
-        (item) => item.type === 'Resource' && item.categorySlug === 'product'
-      )
-      .map((item) => ({ label: item.title, value: item.slug }));
-  }, [$contentMap]);
-
-  const productCollection = useMemo(() => {
-    return createListCollection({
-      items: products,
-      itemToValue: (item) => item.value,
-      itemToString: (item) => item.label,
-    });
-  }, [products]);
-
-  const [selectionMode, setSelectionMode] = useState<
-    'all' | 'type' | 'specific'
-  >(() => {
-    if (params?.slugs !== undefined) return 'specific';
-    if (params?.productType !== undefined) return 'type';
-    return 'all';
-  });
-
-  const [productType, setProductType] = useState(
-    () => params?.productType || ''
-  );
-
-  const [selectedItems, setSelectedItems] = useState<
-    { label: string; value: string }[]
-  >(() => {
-    if (params?.slugs !== undefined) {
-      const slugs =
-        typeof params.slugs === 'string' && params.slugs
-          ? params.slugs.split(',')
-          : [];
-      return products.filter((p) => slugs.includes(p.value));
-    }
-    return [];
-  });
-
-  const [showSelector, setShowSelector] = useState(false);
-
-  useEffect(() => {
-    if (isInitialMount.current) {
-      isInitialMount.current = false;
-      return;
-    }
-
-    const constructPayload = () => {
-      if (selectionMode === 'all') {
-        return { category: 'product' };
-      }
-      if (selectionMode === 'type') {
-        return { category: 'product', productType: productType };
-      }
-      if (selectionMode === 'specific') {
-        const slugs = selectedItems.map((item) => item.value).join(',');
-        if (slugs) {
-          return { slugs };
-        }
-        return {}; // Return empty if no slugs are selected
-      }
-      return {};
-    };
-
-    const timeoutId = setTimeout(() => {
-      const paneNode = ctx.allNodes.get().get(nodeId) as PaneNode;
-      if (!paneNode) return;
-
-      const updatedPaneNode = {
-        ...paneNode,
-        codeHookPayload: {
-          target: paneNode.codeHookPayload?.target,
-          options: JSON.stringify(constructPayload()),
-        },
-      };
-      ctx.modifyNodes([updatedPaneNode]);
-    }, 500);
-
-    return () => clearTimeout(timeoutId);
-  }, [selectionMode, productType, selectedItems]);
-
-  const handleModeChange = (
-    details: RadioGroupNamespace.ValueChangeDetails
-  ) => {
-    if (details.value) {
-      setSelectionMode(details.value as 'all' | 'type' | 'specific');
-      setShowSelector(false);
-    }
-  };
-
-  const handleMultiSelectChange = (details: { value: string[] }) => {
-    const newSelection = products.filter((p) =>
-      details.value.includes(p.value)
-    );
-    setSelectedItems(newSelection);
-  };
-
-  const radioGroupStyles = `
-    .radio-item[data-state="checked"] { background-color: #f0f9ff; border-color: #0284c7; }
-    .radio-item[data-state="checked"] .check-icon { display: flex; }
-    .radio-item .check-icon { display: none; }
-  `;
-
-  return (
-    <div className="space-y-4 p-2">
-      <style>{radioGroupStyles}</style>
-      <h3 className="font-bold text-gray-800">Product Grid Configuration</h3>
-
-      <RadioGroup.Root
-        className="grid grid-cols-1 gap-4"
-        defaultValue={selectionMode}
-        onValueChange={handleModeChange}
-      >
-        {modes.map((option) => (
-          <RadioGroup.Item
-            key={option.id}
-            value={option.id}
-            className="radio-item relative flex cursor-pointer rounded-lg border bg-white p-4 shadow-sm focus:outline-none"
-          >
-            <div className="flex w-full items-center justify-between">
-              <div className="flex items-center">
-                <RadioGroup.ItemControl className="hidden" />
-                <div className="flex flex-col">
-                  <RadioGroup.ItemText className="block text-sm font-bold text-gray-900">
-                    {option.title}
-                  </RadioGroup.ItemText>
-                  <RadioGroup.ItemText className="flex items-center text-sm text-gray-500">
-                    {option.description}
-                  </RadioGroup.ItemText>
-                </div>
-              </div>
-              <div className="check-icon hidden shrink-0">
-                <CheckCircleIcon className="h-5 w-5 text-cyan-600" />
-              </div>
-            </div>
-            <RadioGroup.ItemHiddenInput />
-          </RadioGroup.Item>
-        ))}
-      </RadioGroup.Root>
-
-      {selectionMode === 'type' && (
-        <div className="space-y-2 rounded-md border p-3">
-          <label
-            htmlFor="productType"
-            className="text-sm font-bold text-gray-700"
-          >
-            Product Type
-          </label>
-          <input
-            type="text"
-            id="productType"
-            value={productType}
-            onChange={(e) => setProductType(e.target.value)}
-            placeholder="e.g., 'electronics'"
-            className="w-full rounded-md border-gray-300 px-3 py-2 shadow-sm focus:border-cyan-500 focus:ring-cyan-500 md:text-sm"
-          />
-        </div>
-      )}
-
-      {selectionMode === 'specific' && (
-        <div className="rounded-md border bg-gray-50 p-3">
-          <div className="flex items-center justify-between">
-            <div>
-              <p className="text-sm font-bold text-gray-600">
-                Selected Products
-              </p>
-              <p className="font-bold text-gray-900">
-                {selectedItems.length} item(s) selected
-              </p>
-            </div>
-            <button
-              type="button"
-              onClick={() => setShowSelector(!showSelector)}
-              className="rounded bg-white px-3 py-1 text-sm font-bold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50"
-            >
-              {showSelector ? 'Close' : 'Change Selection'}
-            </button>
-          </div>
-
-          {showSelector && (
-            <div className="mt-4 space-y-2">
-              <Combobox.Root
-                collection={productCollection}
-                value={selectedItems.map((item) => item.value)}
-                onValueChange={handleMultiSelectChange}
-                multiple
-                lazyMount
-                unmountOnExit
-              >
-                <Combobox.Label className="text-sm font-bold text-gray-700">
-                  Find products to include
-                </Combobox.Label>
-                <style>{productGridComboItemHighlightStyles}</style>
-                <Combobox.Control>
-                  <Combobox.Input
-                    className="w-full rounded-md border-gray-300 px-3 py-2 shadow-sm focus:border-cyan-500 focus:ring-cyan-500 md:text-sm"
-                    placeholder="Search products..."
-                  />
-                </Combobox.Control>
-                <Portal>
-                  <Combobox.Positioner>
-                    <Combobox.Content className="z-50 max-h-60 overflow-y-auto rounded-md border bg-white shadow-lg">
-                      {products.map((item) => (
-                        <Combobox.Item
-                          key={item.value}
-                          item={item}
-                          className="product-grid-combo-item relative flex cursor-pointer select-none items-center px-4 py-2 text-gray-900"
-                        >
-                          <Combobox.ItemText>{item.label}</Combobox.ItemText>
-                          <Combobox.ItemIndicator className="ml-auto">
-                            <CheckCircleIcon className="h-5 w-5" />
-                          </Combobox.ItemIndicator>
-                        </Combobox.Item>
-                      ))}
-                    </Combobox.Content>
-                  </Combobox.Positioner>
-                </Portal>
-              </Combobox.Root>
-            </div>
-          )}
-        </div>
-      )}
-    </div>
-  );
-};
-
-export default ProductGridSetup;