astro-tractstack 2.0.13 → 2.0.15

package/templates/src/components/edit/pane/PageGenSelector.tsx

@@ -1,245 +0,0 @@
-import { useState, useMemo } from 'react';
-import { useStore } from '@nanostores/react';
-import { RadioGroup } from '@ark-ui/react/radio-group';
-import CheckCircleIcon from '@heroicons/react/20/solid/CheckCircleIcon';
-//import CubeTransparentIcon from '@heroicons/react/24/outline/CubeTransparentIcon';
-import DocumentIcon from '@heroicons/react/24/outline/DocumentIcon';
-import ExclamationTriangleIcon from '@heroicons/react/24/outline/ExclamationTriangleIcon';
-import AddPanePanel from './AddPanePanel';
-import PageCreationGen from './PageGen';
-import PageCreationSpecial from './PageGenSpecial';
-import {
-  /* hasAssemblyAIStore,*/ fullContentMapStore,
-} from '@/stores/storykeep';
-import type { NodesContext } from '@/stores/nodes';
-import type { BrandConfig } from '@/types/tractstack';
-
-interface PageCreationSelectorProps {
-  nodeId: string;
-  ctx: NodesContext;
-  isTemplate?: boolean;
-  config?: BrandConfig;
-}
-
-type CreationMode = {
-  id: 'design' | 'generate' | 'featured';
-  name: string;
-  description: string;
-  icon: typeof DocumentIcon;
-  active: boolean;
-  disabled?: boolean;
-  disabledReason?: string;
-};
-
-export const PageCreationSelector = ({
-  nodeId,
-  ctx,
-  isTemplate = false,
-  config,
-}: PageCreationSelectorProps) => {
-  const [selectedMode, setSelectedMode] =
-    useState<CreationMode['id']>('design');
-  const [showTemplates, setShowTemplates] = useState(false);
-  const [showGen, setShowGen] = useState(false);
-  const [showFeatured, setShowFeatured] = useState(false);
-  const $contentMap = useStore(fullContentMapStore);
-
-  const validPagesCount = useMemo(() => {
-    return $contentMap.filter(
-      (item) =>
-        item.type === 'StoryFragment' &&
-        typeof item.description === 'string' &&
-        typeof item.thumbSrc === 'string' &&
-        typeof item.thumbSrcSet === 'string' &&
-        typeof item.changed === 'string'
-    ).length;
-  }, [$contentMap]);
-
-  const modes = useMemo(() => {
-    const baseModesWithoutFeature = [
-      {
-        id: 'design',
-        name: 'Design from scratch',
-        description:
-          'Build your page section by section using our design system',
-        icon: DocumentIcon,
-        active: true,
-      },
-      /*
-      ...(hasAssemblyAIStore.get()
-        ? [
-            {
-              id: 'generate',
-              name: 'Generate with AI',
-              description:
-                'Tell us what kind of page you want and AI will generate a first draft',
-              icon: CubeTransparentIcon,
-              active: hasAssemblyAIStore.get(),
-            },
-          ]
-        : []),
-      */
-    ];
-
-    //const featuredMode = {
-    //  id: 'featured',
-    //  name: 'Featured Content home page',
-    //  description:
-    //    'A layout with a prominent hero section showcasing a featured article and grid of additional top articles',
-    //   icon: NewspaperIcon,
-    //  active: true,
-    //  disabled: validPagesCount < 3,
-    //  disabledReason:
-    //   validPagesCount === 0
-    //     ? 'Not yet available; no pages with SEO metadata found.'
-    //     : `Not yet available; requires at least 3 pages with SEO metadata (currently ${validPagesCount}).`,
-    //};
-
-    return [...baseModesWithoutFeature /*, featuredMode */] as CreationMode[];
-  }, [validPagesCount]);
-
-  const handleContinue = () => {
-    if (!selectedMode) return;
-
-    const selectedModeObj = modes.find((m) => m.id === selectedMode);
-    if (selectedModeObj?.disabled) return;
-
-    if (selectedMode === 'design') {
-      setShowTemplates(true);
-    } else if (selectedMode === 'generate') {
-      setShowGen(true);
-    } else if (selectedMode === 'featured') {
-      setShowFeatured(true);
-    }
-  };
-
-  const radioGroupStyles = `
-    .radio-control[data-state="unchecked"] .radio-dot {
-      background-color: #d1d5db; /* gray-300 */
-    }
-    .radio-control[data-state="checked"] .radio-dot {
-      background-color: #0891b2; /* cyan-600 */
-    }
-    .radio-control[data-state="checked"] {
-      border-color: #0891b2; /* cyan-600 */
-    }
-    .radio-item[data-state="checked"] {
-      background-color: #f9f9f9;
-      color: white;
-    }
-    .radio-item[data-disabled="true"] {
-      background-color: #f9fafb;
-      cursor: not-allowed;
-    }
-  `;
-
-  if (showTemplates || isTemplate)
-    return (
-      <AddPanePanel
-        nodeId={nodeId}
-        first={true}
-        ctx={ctx}
-        isStoryFragment={true}
-        config={config!}
-      />
-    );
-  else if (showGen) return <PageCreationGen nodeId={nodeId} ctx={ctx} />;
-  else if (showFeatured)
-    return <PageCreationSpecial nodeId={nodeId} ctx={ctx} />;
-
-  return (
-    <div className="p-0.5 shadow-inner">
-      <style>{radioGroupStyles}</style>
-      <div className="w-full rounded-md bg-white p-6">
-        <h2 className="font-action mb-6 text-2xl font-bold text-gray-900">
-          How would you like to create your page?
-        </h2>
-
-        <div className="w-full max-w-3xl">
-          <RadioGroup.Root
-            defaultValue="design"
-            onValueChange={(details) => {
-              if (details.value) {
-                setSelectedMode(details.value as CreationMode['id']);
-              }
-            }}
-          >
-            <RadioGroup.Label className="sr-only">
-              Page Creation Mode
-            </RadioGroup.Label>
-            <div className="space-y-4">
-              {modes.map((mode) => (
-                <RadioGroup.Item
-                  key={mode.id}
-                  value={mode.id}
-                  disabled={mode.disabled}
-                  className={`radio-item relative flex cursor-pointer rounded-lg px-5 py-6 shadow-md focus:outline-none ${
-                    mode.disabled
-                      ? 'bg-gray-50'
-                      : 'bg-white hover:ring-2 hover:ring-cyan-600 hover:ring-offset-2'
-                  }`}
-                >
-                  <div className="flex w-full items-center justify-between">
-                    <div className="flex items-center">
-                      <div className="flex-shrink-0">
-                        {mode.disabled ? (
-                          <ExclamationTriangleIcon
-                            className="h-8 w-8 text-amber-500"
-                            aria-hidden="true"
-                          />
-                        ) : (
-                          <mode.icon
-                            className="h-8 w-8 text-cyan-700 data-[state=checked]:text-white"
-                            aria-hidden="true"
-                          />
-                        )}
-                      </div>
-                      <div className="ml-4">
-                        <RadioGroup.ItemText>
-                          <p
-                            className={`font-bold ${mode.disabled ? 'text-gray-400' : 'text-gray-900 data-[state=checked]:text-white'}`}
-                          >
-                            {mode.name}
-                          </p>
-                          <span
-                            className={`inline ${mode.disabled ? 'text-gray-400' : 'text-gray-500 data-[state=checked]:text-cyan-100'}`}
-                          >
-                            {mode.description}
-                            {mode.disabled && mode.disabledReason && (
-                              <span className="mt-1 block font-bold text-amber-500">
-                                {mode.disabledReason}
-                              </span>
-                            )}
-                          </span>
-                        </RadioGroup.ItemText>
-                      </div>
-                    </div>
-                    <div className="hidden shrink-0 text-white data-[state=checked]:block">
-                      <CheckCircleIcon className="h-6 w-6" />
-                    </div>
-                  </div>
-                  <RadioGroup.ItemControl className="radio-control mr-2 flex h-4 w-4 items-center justify-center rounded-full border border-gray-300">
-                    <div className="radio-dot h-2 w-2 rounded-full" />
-                  </RadioGroup.ItemControl>
-                  <RadioGroup.ItemHiddenInput />
-                </RadioGroup.Item>
-              ))}
-            </div>
-          </RadioGroup.Root>
-        </div>
-
-        <div className="mt-8 flex justify-end">
-          <button
-            type="button"
-            onClick={handleContinue}
-            className="inline-flex justify-center rounded-md bg-cyan-700 px-6 py-2 text-sm font-bold text-white shadow-sm hover:bg-cyan-600 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-cyan-600"
-          >
-            Continue
-          </button>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default PageCreationSelector;

package/templates/src/components/edit/pane/PageGenSpecial.tsx

@@ -1,339 +0,0 @@
-import { useState } from 'react';
-import type { ReactNode } from 'react';
-import { RadioGroup } from '@ark-ui/react/radio-group';
-import { ulid } from 'ulid';
-import VisualBreakPreview from '@/components/compositor/preview/VisualBreakPreview';
-import { getTemplateVisualBreakPane } from '@/utils/compositor/TemplatePanes';
-import { fullContentMapStore } from '@/stores/storykeep';
-import type { NodesContext } from '@/stores/nodes';
-import { findUniqueSlug } from '@/utils/helpers';
-import { tailwindToHex } from '@/utils/compositor/tailwindColors';
-import { SvgBreaks } from '@/constants/shapes';
-import type { StoryFragmentNode, TemplatePane } from '@/types/compositorTypes';
-
-// Layout options with IDs, labels, and descriptions
-const layoutOptions = [
-  {
-    id: 'featured-only',
-    label: 'Featured Content Only',
-    description: 'A hero section highlighting your most important content',
-  },
-  {
-    id: 'featured-list',
-    label: 'Featured with List',
-    description: 'Hero section with a supporting content grid below',
-  },
-  {
-    id: 'complete-home',
-    label: 'Complete Home Layout',
-    description: 'Hero section, visual break, and supporting content grid',
-  },
-];
-
-// Visual break variants for selection
-const breakVariants = [
-  { id: 'cutwide2', label: 'Wave Cut', odd: true },
-  { id: 'cutwide1', label: 'Diagonal Cut', odd: true },
-  { id: 'burstwide2', label: 'Burst', odd: false },
-  { id: 'crookedwide', label: 'Crooked', odd: false },
-];
-
-interface PageCreationSpecialProps {
-  nodeId: string;
-  ctx: NodesContext;
-}
-
-const PageCreationSpecial = ({
-  nodeId,
-  ctx,
-}: PageCreationSpecialProps): ReactNode => {
-  // State for layout and visual break selection
-  const [selectedLayout, setSelectedLayout] = useState(layoutOptions[0].id);
-  const [selectedBreak, setSelectedBreak] = useState(breakVariants[0].id);
-  const [isCreating, setIsCreating] = useState(false);
-
-  const existingSlugs = fullContentMapStore
-    .get()
-    .filter((item) => ['Pane', 'StoryFragment'].includes(item.type))
-    .map((item) => item.slug);
-
-  // CSS for RadioGroup styling
-  const radioGroupStyles = `
-    .radio-control[data-state="unchecked"] .radio-dot {
-      background-color: #d1d5db; /* gray-300 */
-    }
-    .radio-control[data-state="checked"] .radio-dot {
-      background-color: #0891b2; /* cyan-600 */
-    }
-    .radio-control[data-state="checked"] {
-      border-color: #0891b2;
-    }
-    .radio-item[data-state="checked"] {
-      border-color: #0891b2;
-      background-color: #ecfeff; /* cyan-50 */
-    }
-  `;
-
-  // Function to handle continue/apply button
-  const handleApply = async () => {
-    if (!selectedLayout) return; // Null check
-
-    try {
-      setIsCreating(true);
-
-      // Get the storyfragment node
-      const storyfragment = ctx.allNodes.get().get(nodeId) as StoryFragmentNode;
-      if (!storyfragment) {
-        console.error('Story fragment not found');
-        return;
-      }
-
-      // Create panes array to hold the IDs of all panes we'll create
-      const paneIds: string[] = [];
-
-      // 1. Create Featured Content pane
-      const featuredContentPane: TemplatePane = {
-        id: ulid(),
-        nodeType: 'Pane',
-        title: 'Featured Article',
-        slug: findUniqueSlug(`featured-article`, existingSlugs),
-        isDecorative: false,
-        parentId: nodeId,
-        codeHookTarget: 'featured-article',
-        codeHookPayload: {
-          options: JSON.stringify({
-            title: 'Featured Article',
-          }),
-        },
-      };
-
-      // Add the featured content pane
-      const featuredContentId = ctx.addTemplatePane(
-        nodeId,
-        featuredContentPane
-      );
-      if (featuredContentId) {
-        paneIds.push(featuredContentId);
-      }
-
-      // If layout includes visual break + list content
-      if (selectedLayout === 'complete-home') {
-        // Get the selected break variant
-        const breakVariant = breakVariants.find((b) => b.id === selectedBreak);
-        const bgColor = breakVariant?.odd ? 'white' : 'gray-50';
-        const fillColor = breakVariant?.odd ? 'gray-50' : 'white';
-
-        const shapeName = `kCz${selectedBreak}`;
-        const isFlipped = SvgBreaks[shapeName]?.flipped || false;
-
-        const finalBgColor = tailwindToHex(
-          isFlipped ? fillColor : bgColor,
-          null
-        );
-        const finalFillColor = tailwindToHex(
-          isFlipped ? bgColor : fillColor,
-          null
-        );
-
-        // 2. Create Visual Break pane
-        const visualBreakTemplate = getTemplateVisualBreakPane(selectedBreak);
-        visualBreakTemplate.id = ulid();
-        visualBreakTemplate.title = 'Visual Break';
-        visualBreakTemplate.slug = `${storyfragment.slug}-visual-break`;
-        visualBreakTemplate.bgColour = finalBgColor;
-
-        // Configure the SVG fill color
-        if (visualBreakTemplate.bgPane) {
-          if (visualBreakTemplate.bgPane.type === 'visual-break') {
-            if (visualBreakTemplate.bgPane.breakDesktop) {
-              visualBreakTemplate.bgPane.breakDesktop.svgFill = finalFillColor;
-            }
-            if (visualBreakTemplate.bgPane.breakTablet) {
-              visualBreakTemplate.bgPane.breakTablet.svgFill = finalFillColor;
-            }
-            if (visualBreakTemplate.bgPane.breakMobile) {
-              visualBreakTemplate.bgPane.breakMobile.svgFill = finalFillColor;
-            }
-          }
-        }
-
-        // Add the visual break pane
-        const visualBreakId = ctx.addTemplatePane(nodeId, visualBreakTemplate);
-        if (visualBreakId) {
-          paneIds.push(visualBreakId);
-        }
-      }
-
-      // If layout includes list content
-      if (
-        selectedLayout === 'featured-list' ||
-        selectedLayout === 'complete-home'
-      ) {
-        // 3. Create List Content pane
-        const listContentPane: TemplatePane = {
-          id: ulid(),
-          nodeType: 'Pane',
-          title: 'Content List',
-          slug: `${storyfragment.slug}-content-list`,
-          isDecorative: false,
-          parentId: nodeId,
-          // For complete-home layout, match the background color with the visual break
-          bgColour: tailwindToHex(
-            selectedLayout === 'complete-home' ? 'gray-50' : 'white',
-            null
-          ),
-          codeHookTarget: 'list-content',
-          codeHookPayload: {
-            options: JSON.stringify({
-              title: 'More Articles',
-              sortByPopular: 'true',
-              showTopics: 'true',
-              showDate: 'true',
-              limit: '10',
-              category: '',
-            }),
-          },
-        };
-
-        // Add the list content pane
-        const listContentId = ctx.addTemplatePane(nodeId, listContentPane);
-        if (listContentId) {
-          paneIds.push(listContentId);
-        }
-      }
-
-      // Update the storyfragment with the new panes
-      if (paneIds.length > 0) {
-        storyfragment.paneIds = paneIds;
-        storyfragment.isChanged = true;
-        ctx.modifyNodes([storyfragment]);
-        ctx.notifyNode('root');
-      }
-
-      // Set title and slug if they're not set
-      if (!storyfragment.title || !storyfragment.slug) {
-        const updatedFragment = {
-          ...storyfragment,
-          title: storyfragment.title || 'Home Page',
-          slug: storyfragment.slug || 'home',
-          isChanged: true,
-        };
-        ctx.modifyNodes([updatedFragment]);
-      }
-    } catch (error) {
-      console.error('Error creating special layout:', error);
-    } finally {
-      setIsCreating(false);
-    }
-  };
-
-  return (
-    <div className="rounded-md bg-white p-6">
-      <style>{radioGroupStyles}</style>
-      <div className="text-mydarkgrey mb-6 space-y-6 italic">
-        <strong>Note:</strong> when editing web pages (story fragments) be sure
-        to click on Topics &amp; Details for each page; (if you see no articles,
-        that's why!)
-      </div>
-      <div className="mb-6 space-y-6">
-        <div>
-          <RadioGroup.Root
-            defaultValue={selectedLayout}
-            onValueChange={(details) => {
-              if (details.value) {
-                setSelectedLayout(details.value);
-              }
-            }}
-          >
-            <RadioGroup.Label className="text-lg font-bold">
-              Select Layout
-            </RadioGroup.Label>
-            <div className="mt-2 space-y-4">
-              {layoutOptions.map((option) => (
-                <RadioGroup.Item
-                  key={option.id}
-                  value={option.id}
-                  className="radio-item flex items-center space-x-3 rounded-lg border p-4"
-                >
-                  <div className="flex items-center">
-                    <RadioGroup.ItemControl className="radio-control mr-2 flex h-4 w-4 items-center justify-center rounded-full border border-gray-300">
-                      <div className="radio-dot h-2 w-2 rounded-full" />
-                    </RadioGroup.ItemControl>
-                    <RadioGroup.ItemText>
-                      <div>
-                        <div className="font-bold">{option.label}</div>
-                        <div className="text-sm text-gray-500">
-                          {option.description}
-                        </div>
-                      </div>
-                    </RadioGroup.ItemText>
-                  </div>
-                  <RadioGroup.ItemHiddenInput />
-                </RadioGroup.Item>
-              ))}
-            </div>
-          </RadioGroup.Root>
-        </div>
-
-        {selectedLayout === 'complete-home' && (
-          <div>
-            <div className="mb-2 text-lg font-bold">
-              Select Visual Break Style
-            </div>
-            <div className="grid grid-cols-2 gap-4 md:grid-cols-3 lg:grid-cols-5">
-              {breakVariants.map((breakVar) => (
-                <div
-                  key={breakVar.id}
-                  className={`cursor-pointer rounded-lg border p-2 ${
-                    selectedBreak === breakVar.id
-                      ? 'border-cyan-600 ring-2 ring-cyan-600 ring-opacity-50'
-                      : 'border-gray-300'
-                  }`}
-                  onClick={() => setSelectedBreak(breakVar.id)}
-                >
-                  <div className="h-16 overflow-hidden rounded">
-                    <VisualBreakPreview
-                      bgColour="#ffffff"
-                      fillColour="#000000"
-                      variant={breakVar.id}
-                      height={60}
-                    />
-                  </div>
-                  <div className="mt-1 text-center text-sm font-bold">
-                    {breakVar.label}
-                  </div>
-                </div>
-              ))}
-            </div>
-          </div>
-        )}
-      </div>
-
-      <div className="mt-6 flex justify-end gap-3">
-        <button
-          onClick={() => {
-            ctx.setPanelMode(nodeId, 'add', 'DEFAULT');
-            ctx.notifyNode('root');
-          }}
-          className="rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-bold text-gray-700 hover:bg-gray-50"
-          disabled={isCreating}
-        >
-          Back
-        </button>
-        <button
-          onClick={handleApply}
-          disabled={isCreating || !selectedLayout}
-          className={`rounded-md px-6 py-2 text-sm font-bold text-white transition-colors ${
-            isCreating || !selectedLayout
-              ? 'bg-gray-400'
-              : 'bg-cyan-600 hover:bg-cyan-700'
-          }`}
-        >
-          {isCreating ? 'Creating...' : 'Create Layout'}
-        </button>
-      </div>
-    </div>
-  );
-};
-
-export default PageCreationSpecial;