astro-tractstack 2.0.0-rc.0

package/templates/src/components/edit/storyfragment/StoryFragmentPanel_slug.tsx

@@ -0,0 +1,269 @@
+import { useState, useEffect, type ChangeEvent } from 'react';
+import ExclamationTriangleIcon from '@heroicons/react/24/outline/ExclamationTriangleIcon';
+import CheckIcon from '@heroicons/react/24/outline/CheckIcon';
+import LockClosedIcon from '@heroicons/react/24/outline/LockClosedIcon';
+import { getCtx } from '@/stores/nodes';
+import { cloneDeep } from '@/utils/helpers';
+import type { BrandConfig } from '@/types/tractstack';
+import {
+  StoryFragmentMode,
+  type StoryFragmentNode,
+} from '@/types/compositorTypes';
+
+interface StoryFragmentSlugPanelProps {
+  nodeId: string;
+  setMode: (mode: StoryFragmentMode) => void;
+  config: BrandConfig;
+}
+
+const StoryFragmentSlugPanel = ({
+  nodeId,
+  setMode,
+  config,
+}: StoryFragmentSlugPanelProps) => {
+  const [slug, setSlug] = useState('');
+  const [isValid, setIsValid] = useState(false);
+  const [warning, setWarning] = useState(false);
+  const [charCount, setCharCount] = useState(0);
+  const [validationError, setValidationError] = useState<string | null>(null);
+  const [canSave, setCanSave] = useState(false);
+  const isHomeSlug = slug === config.HOME_SLUG;
+
+  const ctx = getCtx();
+  const allNodes = ctx.allNodes.get();
+  const storyfragmentNode = allNodes.get(nodeId) as StoryFragmentNode;
+  if (!storyfragmentNode) return null;
+
+  useEffect(() => {
+    setSlug(storyfragmentNode.slug);
+    setCharCount(storyfragmentNode.slug.length);
+    checkLiveValidity(storyfragmentNode.slug);
+  }, [storyfragmentNode.slug]);
+
+  // More permissive validation for typing
+  const checkLiveValidity = (value: string) => {
+    const length = value.length;
+    setCharCount(length);
+
+    // If it's the home slug, consider it valid but locked
+    if (value === config.HOME_SLUG) {
+      setIsValid(true);
+      setCanSave(false);
+      setValidationError(null);
+      return true;
+    }
+
+    // Basic format check for allowed characters
+    if (!/^[a-z0-9-]*$/.test(value)) {
+      setValidationError(
+        'Only lowercase letters, numbers, and hyphens allowed'
+      );
+      setIsValid(false);
+      setCanSave(false);
+      return false;
+    }
+
+    // Length checks
+    setIsValid(length >= 3 && length <= 60);
+    setWarning(length > 60 && length <= 75);
+    setValidationError(null);
+
+    // Check if we can save
+    if (length >= 3) {
+      const saveValidation = checkSaveValidity(value);
+      setCanSave(saveValidation.isValid);
+      if (!saveValidation.isValid) {
+        setValidationError(saveValidation.error || null);
+      }
+    } else {
+      setCanSave(false);
+    }
+
+    return true;
+  };
+
+  // Strict validation for saving
+  const checkSaveValidity = (
+    value: string
+  ): { isValid: boolean; error?: string } => {
+    // Don't allow saving if it's the home slug
+    if (value === config.HOME_SLUG) {
+      return {
+        isValid: false,
+        error: 'Cannot modify the home page slug',
+      };
+    }
+
+    // Strict pattern that prevents leading/trailing hyphens and multiple consecutive hyphens
+    if (!/^[a-z0-9]+(?:-[a-z0-9]+)*$/.test(value)) {
+      return {
+        isValid: false,
+        error:
+          'Slug must start and end with letters or numbers, and no consecutive hyphens',
+      };
+    }
+
+    // Check duplicates and reserved slugs
+    return ctx.isSlugValid(value, nodeId);
+  };
+
+  const handleSlugChange = (e: ChangeEvent<HTMLInputElement>) => {
+    if (isHomeSlug) return; // Prevent changes if it's the home slug
+
+    const newSlug = e.target.value.toLowerCase().replace(/[^a-z0-9-]/g, '');
+    if (newSlug.length <= 75) {
+      setSlug(newSlug);
+      checkLiveValidity(newSlug);
+    }
+  };
+
+  const handleSlugBlur = () => {
+    if (canSave && !isHomeSlug) {
+      const ctx = getCtx();
+      const updatedNode = cloneDeep({
+        ...storyfragmentNode,
+        slug,
+        isChanged: true,
+      });
+      ctx.modifyNodes([updatedNode]);
+    }
+  };
+
+  return (
+    <div className="group mb-4 w-full rounded-b-md bg-white px-1.5 py-6">
+      <div className="px-3.5">
+        <div className="mb-4 flex justify-between">
+          <h3 className="text-lg font-bold">Slug (url)</h3>
+          <button
+            onClick={() => setMode(StoryFragmentMode.DEFAULT)}
+            className="text-myblue hover:text-black"
+          >
+            ← Close Panel
+          </button>
+        </div>
+
+        <div className="relative max-w-96">
+          <input
+            type="text"
+            value={slug}
+            onChange={handleSlugChange}
+            onBlur={handleSlugBlur}
+            onKeyDown={(e) => {
+              if (e.key === 'Enter') {
+                e.currentTarget.blur();
+              }
+            }}
+            readOnly={isHomeSlug}
+            className={`w-full rounded-md border px-2 py-1 pr-16 ${
+              isHomeSlug
+                ? 'cursor-not-allowed border-gray-300 bg-gray-100'
+                : validationError || charCount < 3
+                  ? 'border-red-500 bg-red-50'
+                  : isValid && canSave
+                    ? 'border-green-500 bg-green-50'
+                    : warning
+                      ? 'border-yellow-500 bg-yellow-50'
+                      : 'border-gray-300'
+            }`}
+            placeholder="Enter URL slug (3-60 characters recommended)"
+          />
+          <div className="absolute right-2 top-1/2 flex -translate-y-1/2 items-center gap-2">
+            {isHomeSlug ? (
+              <LockClosedIcon className="h-5 w-5 text-gray-500" />
+            ) : validationError || charCount < 3 ? (
+              <ExclamationTriangleIcon className="h-5 w-5 text-red-500" />
+            ) : isValid && canSave ? (
+              <CheckIcon className="h-5 w-5 text-green-500" />
+            ) : warning ? (
+              <ExclamationTriangleIcon className="h-5 w-5 text-yellow-500" />
+            ) : null}
+            <span
+              className={`text-sm ${
+                isHomeSlug
+                  ? 'text-gray-500'
+                  : validationError || charCount < 3
+                    ? 'text-red-500'
+                    : isValid && canSave
+                      ? 'text-green-500'
+                      : warning
+                        ? 'text-yellow-500'
+                        : 'text-gray-500'
+              }`}
+            >
+              {charCount}/75
+            </span>
+          </div>
+        </div>
+        {validationError && (
+          <div className="mt-2 text-sm text-red-600">
+            <ExclamationTriangleIcon className="mr-1 inline h-4 w-4" />
+            {validationError}
+          </div>
+        )}
+        {isHomeSlug && (
+          <div className="mt-2 text-sm text-gray-600">
+            <LockClosedIcon className="mr-1 inline h-4 w-4" />
+            This is your home page slug and cannot be modified
+          </div>
+        )}
+        <div className="mt-4 text-lg">
+          <div className="text-gray-600">
+            Create a clean, descriptive URL slug that helps users and search
+            engines understand the page content.
+            <ul className="ml-4 mt-1">
+              <li>
+                <CheckIcon className="inline h-4 w-4" /> Use hyphens to separate
+                words
+              </li>
+              <li>
+                <CheckIcon className="inline h-4 w-4" /> Keep it short and
+                descriptive
+              </li>
+              <li>
+                <CheckIcon className="inline h-4 w-4" /> Use only lowercase
+                letters, numbers, and hyphens
+              </li>
+              <li>
+                <CheckIcon className="inline h-4 w-4" /> Must start and end with
+                a letter or number
+              </li>
+            </ul>
+          </div>
+          <div className="py-4">
+            {!isHomeSlug && (
+              <>
+                {charCount < 3 && (
+                  <span className="text-red-500">
+                    Slug must be at least 3 characters
+                  </span>
+                )}
+                {charCount >= 3 && charCount < 5 && !validationError && (
+                  <span className="text-gray-500">
+                    Consider adding more characters for better description
+                  </span>
+                )}
+                {warning && !validationError && (
+                  <span className="text-yellow-500">
+                    Slug is getting long - consider shortening it
+                  </span>
+                )}
+                {isValid && canSave && charCount >= 5 && !validationError && (
+                  <span className="text-green-500">
+                    Good URL length and format!
+                  </span>
+                )}
+                {isValid && !canSave && !validationError && (
+                  <span className="text-gray-500">
+                    Valid characters but needs proper formatting to save
+                  </span>
+                )}
+              </>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default StoryFragmentSlugPanel;

package/templates/src/components/edit/storyfragment/StoryFragmentPanel_title.tsx

@@ -0,0 +1,190 @@
+import { useState, useEffect, type ChangeEvent } from 'react';
+import ExclamationTriangleIcon from '@heroicons/react/24/outline/ExclamationTriangleIcon';
+import CheckIcon from '@heroicons/react/24/outline/CheckIcon';
+import { cloneDeep, titleToSlug, findUniqueSlug } from '@/utils/helpers';
+import { getCtx } from '@/stores/nodes';
+import { fullContentMapStore } from '@/stores/storykeep';
+import {
+  StoryFragmentMode,
+  type StoryFragmentNode,
+} from '@/types/compositorTypes';
+
+interface StoryFragmentOpenGraphPanelProps {
+  nodeId: string;
+  setMode?: (mode: StoryFragmentMode) => void;
+}
+
+const StoryFragmentOpenGraphPanel = ({
+  nodeId,
+  setMode,
+}: StoryFragmentOpenGraphPanelProps) => {
+  const [title, setTitle] = useState('');
+  const [isValid, setIsValid] = useState(false);
+  const [warning, setWarning] = useState(false);
+  const [charCount, setCharCount] = useState(0);
+
+  const ctx = getCtx();
+  const allNodes = ctx.allNodes.get();
+  const storyfragmentNode = allNodes.get(nodeId) as StoryFragmentNode;
+  if (!storyfragmentNode) return null;
+
+  useEffect(() => {
+    setTitle(storyfragmentNode.title);
+    setCharCount(storyfragmentNode.title.length);
+  }, [storyfragmentNode.title]);
+
+  const handleTitleChange = (e: ChangeEvent<HTMLInputElement>) => {
+    const newTitle = e.target.value;
+    if (newTitle.length <= 70) {
+      // Prevent more than 70 chars
+      setTitle(newTitle);
+      setCharCount(newTitle.length);
+      setIsValid(newTitle.length >= 35 && newTitle.length <= 60);
+      setWarning(newTitle.length > 60 && newTitle.length <= 70);
+    }
+  };
+
+  const handleTitleBlur = () => {
+    if (title.length >= 5) {
+      // Only update if meets minimum length
+      const ctx = getCtx();
+      const existingSlugs = fullContentMapStore
+        .get()
+        .filter((item) => ['Pane', 'StoryFragment'].includes(item.type))
+        .map((item) => item.slug);
+      const newSlug =
+        storyfragmentNode.slug === ``
+          ? findUniqueSlug(titleToSlug(title), existingSlugs)
+          : null;
+      const updatedNode = cloneDeep({
+        ...storyfragmentNode,
+        title,
+        ...(newSlug ? { slug: newSlug } : {}),
+        isChanged: true,
+      });
+      ctx.modifyNodes([updatedNode]);
+    }
+  };
+
+  return (
+    <div className="group mb-4 w-full rounded-b-md bg-white px-1.5 py-6">
+      <div className="px-3.5">
+        <div className="mb-4 flex justify-between">
+          <h3 className="text-lg font-bold">Page Title</h3>
+          {setMode && (
+            <button
+              onClick={() => setMode && setMode(StoryFragmentMode.DEFAULT)}
+              className="text-myblue hover:text-black"
+            >
+              ← Close Panel
+            </button>
+          )}
+        </div>
+
+        <div className="relative">
+          <input
+            type="text"
+            value={title}
+            onChange={handleTitleChange}
+            onBlur={handleTitleBlur}
+            onKeyDown={(e) => {
+              if (e.key === 'Enter') {
+                e.currentTarget.blur();
+              }
+            }}
+            className={`w-full rounded-md border px-2 py-1 pr-16 ${
+              charCount < 5
+                ? 'border-red-500 bg-red-50'
+                : isValid
+                  ? 'border-green-500 bg-green-50'
+                  : warning
+                    ? 'border-yellow-500 bg-yellow-50'
+                    : 'border-gray-300'
+            }`}
+            placeholder="Enter story fragment title (50-60 characters recommended)"
+          />
+          <div className="absolute right-2 top-1/2 flex -translate-y-1/2 items-center gap-2">
+            {charCount < 5 ? (
+              <ExclamationTriangleIcon className="h-5 w-5 text-red-500" />
+            ) : isValid ? (
+              <CheckIcon className="h-5 w-5 text-green-500" />
+            ) : warning ? (
+              <ExclamationTriangleIcon className="h-5 w-5 text-yellow-500" />
+            ) : null}
+            <span
+              className={`text-sm ${
+                charCount < 5
+                  ? 'text-red-500'
+                  : isValid
+                    ? 'text-green-500'
+                    : warning
+                      ? 'text-yellow-500'
+                      : 'text-gray-500'
+              }`}
+            >
+              {charCount}/70
+            </span>
+          </div>
+        </div>
+        <div className="mt-2 flex items-center gap-2">
+          <button
+            onClick={handleTitleBlur}
+            disabled={title.length < 5}
+            className={`rounded bg-cyan-700 px-3 py-1 text-sm text-white transition-colors hover:bg-cyan-800 ${
+              title !== storyfragmentNode.title ? 'inline-flex' : 'hidden'
+            } items-center ${title.length < 5 ? 'cursor-not-allowed opacity-50' : ''}`}
+          >
+            <CheckIcon className="mr-1 h-4 w-4" />
+            Save
+          </button>
+          <span
+            className={`text-sm ${title !== storyfragmentNode.title ? 'inline' : 'hidden'} text-gray-500`}
+          >
+            or press Enter
+          </span>
+        </div>
+        <div className="mt-4 text-lg">
+          <div className="text-gray-600">
+            Write a clear, descriptive title that accurately represents your
+            page content.
+            <ul className="ml-4 mt-1">
+              <li>
+                <CheckIcon className="inline h-4 w-4" /> Include relevant
+                keywords
+              </li>
+              <li>
+                <CheckIcon className="inline h-4 w-4" /> Avoid unnecessary words
+                like "welcome to" or "the"
+              </li>
+              <li>
+                <CheckIcon className="inline h-4 w-4" /> Unique titles across
+                your website
+              </li>
+            </ul>
+          </div>
+          <div className="py-4">
+            {charCount < 5 && (
+              <span className="text-red-500">
+                Title must be at least 5 characters
+              </span>
+            )}
+            {charCount >= 5 && charCount < 50 && (
+              <span className="text-gray-500">
+                Add {50 - charCount} more characters for optimal length
+              </span>
+            )}
+            {` `}
+            {warning && (
+              <span className="text-yellow-500">Title is getting long</span>
+            )}
+            {isValid && (
+              <span className="text-green-500">Perfect title length!</span>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default StoryFragmentOpenGraphPanel;

package/templates/src/components/edit/widgets/BeliefWidget.tsx

@@ -0,0 +1,183 @@
+import { useState, useEffect } from 'react';
+import SingleParam from '@/components/fields/SingleParam';
+import { widgetMeta } from '@/constants';
+import type { FlatNode, BeliefNode } from '@/types/compositorTypes';
+
+interface BeliefWidgetProps {
+  node: FlatNode;
+  onUpdate: (params: string[]) => void;
+}
+
+export default function BeliefWidget({ node, onUpdate }: BeliefWidgetProps) {
+  const [beliefs, setBeliefs] = useState<BeliefNode[]>([]);
+  const [selectedBeliefTag, setSelectedBeliefTag] = useState<string>('');
+  const [currentScaleType, setCurrentScaleType] = useState<string>('');
+  const [currentPrompt, setCurrentPrompt] = useState<string>('');
+  const [isInitialized, setIsInitialized] = useState(false);
+
+  // Get parameter metadata from the widgetMeta constant
+  const widgetInfo = widgetMeta.belief;
+
+  // Ensure params are always strings
+  const params = node.codeHookParams || [];
+  const beliefTag = String(params[0] || '');
+  const scaleType = String(params[1] || '');
+  const prompt = String(params[2] || '');
+
+  // Check if beliefTag is the placeholder value
+  const isPlaceholder = beliefTag === 'BeliefTag';
+
+  // Update local state when props change
+  useEffect(() => {
+    if (!isPlaceholder && beliefTag) {
+      setSelectedBeliefTag(beliefTag);
+    }
+    setCurrentScaleType(scaleType);
+    setCurrentPrompt(prompt);
+    setIsInitialized(true);
+  }, [beliefTag, scaleType, prompt, isPlaceholder]);
+
+  // Fetch beliefs using new Go backend 2.0 pattern
+  useEffect(() => {
+    const fetchData = async () => {
+      try {
+        const goBackend =
+          import.meta.env.PUBLIC_GO_BACKEND || 'http://localhost:8080';
+        const tenantId = import.meta.env.PUBLIC_TENANTID || 'default';
+
+        // Step 1: Get all belief IDs
+        const idsResponse = await fetch(`${goBackend}/api/v1/nodes/beliefs`, {
+          headers: {
+            'X-Tenant-ID': tenantId,
+          },
+        });
+
+        if (!idsResponse.ok) {
+          throw new Error(
+            `Failed to fetch belief IDs: ${idsResponse.statusText}`
+          );
+        }
+        const { beliefIds } = await idsResponse.json();
+
+        if (!beliefIds || beliefIds.length === 0) {
+          setBeliefs([]);
+          return;
+        }
+
+        // Step 2: Get belief data by IDs
+        const beliefsResponse = await fetch(
+          `${goBackend}/api/v1/nodes/beliefs`,
+          {
+            method: 'POST',
+            headers: {
+              'Content-Type': 'application/json',
+              'X-Tenant-ID': tenantId,
+            },
+            body: JSON.stringify({ beliefIds }),
+          }
+        );
+
+        if (!beliefsResponse.ok) {
+          throw new Error(
+            `Failed to fetch beliefs: ${beliefsResponse.statusText}`
+          );
+        }
+
+        const { beliefs } = await beliefsResponse.json();
+        setBeliefs(beliefs || []);
+      } catch (err) {
+        console.error('Failed to fetch beliefs:', err);
+      }
+    };
+
+    fetchData();
+  }, []);
+
+  const handleBeliefChange = (selectedValue: string) => {
+    if (!isInitialized) return;
+    setSelectedBeliefTag(selectedValue);
+    const selectedBelief = beliefs.find((b) => b.slug === selectedValue);
+    if (selectedBelief) {
+      setCurrentScaleType(selectedBelief.scale || '');
+      onUpdate([selectedValue, selectedBelief.scale || '', currentPrompt]);
+    } else {
+      onUpdate([selectedValue, '', currentPrompt]);
+    }
+  };
+
+  const handlePromptChange = (value: string) => {
+    if (!isInitialized) return;
+    // Sanitize the input value (remove newlines and pipe characters)
+    const sanitizedValue = value.replace(/[\n\r|]/g, '');
+    setCurrentPrompt(sanitizedValue);
+
+    // Use the actual selected tag (from state) or the original belief tag as fallback
+    const tagToUse = selectedBeliefTag || (isPlaceholder ? '' : beliefTag);
+    onUpdate([tagToUse, currentScaleType, sanitizedValue]);
+  };
+
+  // Filter beliefs to only show supported scale types (exclude custom)
+  const filteredBeliefs = beliefs.filter(
+    (b) =>
+      b.scale &&
+      ['likert', 'agreement', 'interest', 'yn', 'tf'].includes(b.scale)
+  );
+
+  // Find the selected belief (if any)
+  const selectedBelief = filteredBeliefs.find(
+    (b) => b.slug === (selectedBeliefTag || (isPlaceholder ? '' : beliefTag))
+  );
+
+  // Determine if we have a real selection - either from state or props
+  const hasRealSelection = !!selectedBelief || (!isPlaceholder && !!beliefTag);
+
+  // Calculate the current value to show in the select dropdown
+  const selectValue = selectedBeliefTag || (isPlaceholder ? '' : beliefTag);
+
+  // Get scale type display names
+  const scaleTypeNames: Record<string, string> = {
+    yn: 'Yes/No',
+    likert: 'Likert Scale (5-point)',
+    agreement: 'Agreement (2-point)',
+    interest: 'Interest (2-point)',
+    tf: 'True/False',
+    custom: 'Custom Values',
+  };
+
+  return (
+    <div className="space-y-4">
+      <div className="flex items-center gap-2">
+        <select
+          value={selectValue}
+          onChange={(e) => handleBeliefChange(e.target.value)}
+          className="flex-1 rounded-md border-0 px-2.5 py-1.5 text-gray-900 ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-cyan-700"
+          disabled={hasRealSelection && !isPlaceholder}
+        >
+          <option value="">Select a belief</option>
+          {filteredBeliefs.map((b) => (
+            <option key={b.slug} value={b.slug}>
+              {b.title}
+            </option>
+          ))}
+        </select>
+      </div>
+
+      {selectedBelief && (
+        <div className="rounded-md bg-blue-50 p-3">
+          <p className="text-sm text-blue-700">
+            <strong>Scale:</strong>{' '}
+            {scaleTypeNames[selectedBelief.scale] || selectedBelief.scale}
+          </p>
+        </div>
+      )}
+
+      {(hasRealSelection || selectedBeliefTag) && (
+        <SingleParam
+          label={widgetInfo.parameters[2].label}
+          value={currentPrompt}
+          onChange={handlePromptChange}
+        />
+      )}
+    </div>
+  );
+}