astro-tractstack 2.3.0 → 2.3.2

package/templates/src/components/storykeep/controls/content/StoryFragmentTable.tsx

@@ -199,7 +199,7 @@ const StoryFragmentTable = ({
       </div>
 
       {/* Table Container */}
-      <div className="overflow-hidden rounded-lg border border-gray-200 bg-white shadow">
+      <div className="overflow-x-auto rounded-lg border border-gray-200 bg-white shadow">
         {filteredFragments.length === 0 ? (
           <div className="px-6 py-12 text-center">
             <svg
@@ -241,7 +241,7 @@ const StoryFragmentTable = ({
             )}
           </div>
         ) : (
-          <div className="overflow-hidden">
+          <div className="inline-block min-w-full align-middle">
             <table className="min-w-full divide-y divide-gray-200">
               <thead className="bg-gray-50">
                 <tr>
@@ -271,15 +271,24 @@ const StoryFragmentTable = ({
                     <tr key={item.id} className="hover:bg-gray-50">
                       <td className="px-3 py-4 md:px-6">
                         <div className="flex flex-col">
-                          <div className="text-sm font-bold text-gray-900">
+                          <div
+                            className="max-w-xs truncate text-sm font-bold text-gray-900"
+                            title={item.title}
+                          >
                             {item.title}
                           </div>
-                          <div className="text-sm text-gray-500 md:hidden">
+                          <div
+                            className="max-w-xs truncate text-sm text-gray-500 md:hidden"
+                            title={`/${item.slug}`}
+                          >
                             /{item.slug}
                           </div>
                         </div>
                       </td>
-                      <td className="hidden whitespace-nowrap px-3 py-4 text-sm text-gray-500 md:table-cell md:px-6">
+                      <td
+                        className="hidden max-w-xs truncate whitespace-nowrap px-3 py-4 text-sm text-gray-500 md:table-cell md:px-6"
+                        title={`/${item.slug}`}
+                      >
                         /{item.slug}
                       </td>
                       <td className="hidden whitespace-nowrap px-3 py-4 text-sm md:table-cell md:px-6">

package/templates/src/components/storykeep/email-builder/Blocks.tsx

@@ -0,0 +1,169 @@
+import { useLayoutEffect, useRef, type ClipboardEvent } from 'react';
+import type { EmailBlock } from '@/utils/api/emailHelpers';
+
+interface BlocksProps {
+  blocks: EmailBlock[];
+  selectedIdx: number | null;
+  onSelect: (index: number) => void;
+  onChange: (index: number, block: EmailBlock) => void;
+}
+
+function TextBlockEditor({
+  idx,
+  block,
+  isSelected,
+  onSelect,
+  onChange,
+  handlePaste,
+}: {
+  idx: number;
+  block: Extract<EmailBlock, { type: 'text' }>;
+  isSelected: boolean;
+  onSelect: (index: number) => void;
+  onChange: (index: number, block: EmailBlock) => void;
+  handlePaste: (
+    e: ClipboardEvent<HTMLTextAreaElement>,
+    idx: number,
+    block: Extract<EmailBlock, { type: 'text' }>
+  ) => void;
+}) {
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+
+  useLayoutEffect(() => {
+    const el = textareaRef.current;
+    if (!el) return;
+    el.style.height = 'auto';
+    el.style.height = `${el.scrollHeight}px`;
+  }, [block.content]);
+
+  const containerStyle = {
+    border: isSelected ? '2px solid #0867ec' : '2px solid transparent',
+    padding: '8px',
+    cursor: 'pointer',
+    marginBottom: '8px',
+  };
+
+  return (
+    <div style={containerStyle} onClick={() => onSelect(idx)}>
+      <textarea
+        ref={textareaRef}
+        value={block.content}
+        className="box-border w-full py-1 leading-relaxed"
+        onChange={(e) => onChange(idx, { ...block, content: e.target.value })}
+        onPaste={(e) => handlePaste(e, idx, block)}
+        onFocus={() => onSelect(idx)}
+        onClick={(e) => e.stopPropagation()}
+        style={{
+          minHeight: '2.5rem',
+          fontFamily: 'Helvetica, sans-serif',
+          fontSize: '16px',
+          color: block.color,
+          textAlign: block.align,
+          fontWeight: block.isBold ? 'bold' : 'normal',
+          border: 'none',
+          background: 'transparent',
+          resize: 'none',
+          overflow: 'hidden',
+        }}
+        rows={1}
+      />
+    </div>
+  );
+}
+
+export default function Blocks({
+  blocks,
+  selectedIdx,
+  onSelect,
+  onChange,
+}: BlocksProps) {
+  const handlePaste = (
+    e: ClipboardEvent<HTMLTextAreaElement>,
+    idx: number,
+    block: Extract<EmailBlock, { type: 'text' }>
+  ) => {
+    e.preventDefault();
+    const pastedText = e.clipboardData.getData('text/plain');
+    const target = e.currentTarget;
+
+    const start = target.selectionStart;
+    const end = target.selectionEnd;
+
+    const newContent =
+      block.content.substring(0, start) +
+      pastedText +
+      block.content.substring(end);
+
+    onChange(idx, { ...block, content: newContent });
+
+    window.requestAnimationFrame(() => {
+      target.setSelectionRange(
+        start + pastedText.length,
+        start + pastedText.length
+      );
+    });
+  };
+
+  return (
+    <div className="flex flex-col p-8">
+      {blocks.map((block, idx) => {
+        const isSelected = selectedIdx === idx;
+
+        if (block.type === 'text') {
+          return (
+            <TextBlockEditor
+              key={idx}
+              idx={idx}
+              block={block}
+              isSelected={isSelected}
+              onSelect={onSelect}
+              onChange={onChange}
+              handlePaste={handlePaste}
+            />
+          );
+        }
+
+        const containerStyle = {
+          border: isSelected ? '2px solid #0867ec' : '2px solid transparent',
+          padding: '8px',
+          cursor: 'pointer',
+          marginBottom: '8px',
+        };
+
+        return (
+          <div key={idx} style={containerStyle} onClick={() => onSelect(idx)}>
+            {block.type === 'button' && (
+              <div style={{ textAlign: 'center' }}>
+                <span
+                  style={{
+                    display: 'inline-block',
+                    padding: '12px 24px',
+                    backgroundColor: block.bgColor,
+                    color: block.textColor,
+                    borderRadius: '4px',
+                    fontFamily: 'Helvetica, sans-serif',
+                    fontSize: '16px',
+                    fontWeight: 'bold',
+                  }}
+                >
+                  {block.label}
+                </span>
+              </div>
+            )}
+
+            {block.type === 'divider' && (
+              <div style={{ width: '100%', padding: '12px 0' }}>
+                <div
+                  style={{
+                    borderTop: `1px solid ${block.color}`,
+                    width: '100%',
+                  }}
+                />
+              </div>
+            )}
+          </div>
+        );
+      })}
+    </div>
+  );
+}

package/templates/src/components/storykeep/email-builder/EmailBuilder.tsx

@@ -0,0 +1,223 @@
+import { useState, useEffect } from 'react';
+import {
+  emailHelpers,
+  type EmailTemplate,
+  type EmailBlock,
+} from '@/utils/api/emailHelpers';
+import Blocks from './Blocks';
+import PropertyPanel from './PropertyPanel';
+import PreviewModal from './PreviewModal';
+
+interface EmailBuilderProps {
+  category: string;
+  templateName: string;
+  onClose: () => void;
+}
+
+export default function EmailBuilder({
+  category,
+  templateName,
+  onClose,
+}: EmailBuilderProps) {
+  const [template, setTemplate] = useState<EmailTemplate | null>(null);
+  const [isLoading, setIsLoading] = useState(true);
+  const [isSaving, setIsSaving] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [selectedIdx, setSelectedIdx] = useState<number | null>(null);
+  const [isPreviewOpen, setIsPreviewOpen] = useState(false);
+
+  useEffect(() => {
+    const load = async () => {
+      try {
+        const data = await emailHelpers.getTemplate(category, templateName);
+        setTemplate(data);
+      } catch (err) {
+        setError(
+          err instanceof Error ? err.message : 'Failed to load template'
+        );
+      } finally {
+        setIsLoading(false);
+      }
+    };
+    load();
+  }, [category, templateName]);
+
+  const handleSave = async () => {
+    if (!template) return;
+    try {
+      setIsSaving(true);
+      await emailHelpers.saveTemplate(category, templateName, template);
+      onClose();
+    } catch (err) {
+      alert(err instanceof Error ? err.message : 'Failed to save');
+    } finally {
+      setIsSaving(false);
+    }
+  };
+
+  const updateBlock = (index: number, newBlock: EmailBlock) => {
+    if (!template) return;
+    const newBlocks = [...template.blocks];
+    newBlocks[index] = newBlock;
+    setTemplate({ ...template, blocks: newBlocks });
+  };
+
+  const addBlock = (type: 'text' | 'button' | 'divider') => {
+    if (!template) return;
+    let newBlock: EmailBlock;
+    if (type === 'text') {
+      newBlock = {
+        type: 'text',
+        content: 'New Text',
+        align: 'left',
+        color: '#333333',
+        isBold: false,
+      };
+    } else if (type === 'button') {
+      newBlock = {
+        type: 'button',
+        label: 'Click Here',
+        url: 'https://',
+        bgColor: '#0867ec',
+        textColor: '#ffffff',
+      };
+    } else {
+      newBlock = { type: 'divider', color: '#e5e7eb' };
+    }
+    setTemplate({ ...template, blocks: [...template.blocks, newBlock] });
+    setSelectedIdx(template.blocks.length);
+  };
+
+  const deleteBlock = (index: number) => {
+    if (!template) return;
+    const newBlocks = [...template.blocks];
+    newBlocks.splice(index, 1);
+    setTemplate({ ...template, blocks: newBlocks });
+    setSelectedIdx(null);
+  };
+
+  const moveBlock = (index: number, direction: 'up' | 'down') => {
+    if (!template) return;
+    if (direction === 'up' && index === 0) return;
+    if (direction === 'down' && index === template.blocks.length - 1) return;
+    const newBlocks = [...template.blocks];
+    const targetIdx = direction === 'up' ? index - 1 : index + 1;
+    const temp = newBlocks[index];
+    newBlocks[index] = newBlocks[targetIdx];
+    newBlocks[targetIdx] = temp;
+    setTemplate({ ...template, blocks: newBlocks });
+    setSelectedIdx(targetIdx);
+  };
+
+  if (isLoading) return <div>Loading...</div>;
+  if (error) return <div className="text-red-600">{error}</div>;
+  if (!template) return null;
+
+  return (
+    <div className="flex max-h-screen min-h-96 flex-col overflow-hidden rounded-lg border border-gray-200 bg-white">
+      <div className="flex items-center justify-between border-b border-gray-200 px-4 py-3">
+        <div className="flex min-w-0 flex-1 items-center gap-4">
+          <button
+            onClick={onClose}
+            className="text-sm font-bold text-gray-500 hover:text-gray-900"
+          >
+            &larr; Back
+          </button>
+          <div className="hidden shrink-0 flex-col border-r border-gray-200 pr-4 md:flex">
+            <span className="text-xs font-bold uppercase tracking-wide text-gray-400">
+              Template file
+            </span>
+            <span className="max-w-xs truncate text-sm font-bold text-gray-700">
+              {category}/{templateName}.json
+            </span>
+          </div>
+          <div className="flex min-w-0 flex-1 flex-col">
+            <label className="text-xs font-bold text-gray-500">
+              Subject Line
+            </label>
+            <input
+              type="text"
+              value={template.subject}
+              onChange={(e) =>
+                setTemplate({ ...template, subject: e.target.value })
+              }
+              className="w-full min-w-0 border-0 bg-transparent p-0 text-sm font-bold focus:ring-0"
+              placeholder="Email Subject..."
+            />
+          </div>
+        </div>
+        <div className="flex gap-2">
+          <button
+            onClick={() => setIsPreviewOpen(true)}
+            className="rounded-md bg-gray-100 px-4 py-2 text-sm font-bold text-gray-700 hover:bg-gray-200"
+          >
+            Preview
+          </button>
+          <button
+            onClick={handleSave}
+            disabled={isSaving}
+            className="rounded-md bg-cyan-600 px-4 py-2 text-sm font-bold text-white hover:bg-cyan-500 disabled:opacity-50"
+          >
+            {isSaving ? 'Saving...' : 'Save Template'}
+          </button>
+        </div>
+      </div>
+
+      <div className="flex min-h-0 flex-1 overflow-hidden">
+        <div className="flex min-h-0 flex-1 flex-col overflow-y-auto bg-gray-50 p-8">
+          <div className="mx-auto min-h-96 w-full max-w-2xl bg-white shadow-sm">
+            <Blocks
+              blocks={template.blocks}
+              selectedIdx={selectedIdx}
+              onSelect={setSelectedIdx}
+              onChange={updateBlock}
+            />
+          </div>
+          <div className="mx-auto mt-8 flex max-w-2xl gap-2">
+            <button
+              onClick={() => addBlock('text')}
+              className="rounded border px-3 py-1 text-sm font-bold text-gray-600"
+            >
+              + Text
+            </button>
+            <button
+              onClick={() => addBlock('button')}
+              className="rounded border px-3 py-1 text-sm font-bold text-gray-600"
+            >
+              + Button
+            </button>
+            <button
+              onClick={() => addBlock('divider')}
+              className="rounded border px-3 py-1 text-sm font-bold text-gray-600"
+            >
+              + Divider
+            </button>
+          </div>
+        </div>
+
+        <div className="w-80 shrink-0 overflow-y-auto border-l border-gray-200 bg-white p-4">
+          {selectedIdx !== null && template.blocks[selectedIdx] ? (
+            <PropertyPanel
+              block={template.blocks[selectedIdx]}
+              onChange={(b) => updateBlock(selectedIdx, b)}
+              onDelete={() => deleteBlock(selectedIdx)}
+              onMoveUp={() => moveBlock(selectedIdx, 'up')}
+              onMoveDown={() => moveBlock(selectedIdx, 'down')}
+            />
+          ) : (
+            <div className="text-sm text-gray-500">
+              Select a block to edit its properties.
+            </div>
+          )}
+        </div>
+      </div>
+
+      {isPreviewOpen && (
+        <PreviewModal
+          template={template}
+          onClose={() => setIsPreviewOpen(false)}
+        />
+      )}
+    </div>
+  );
+}

package/templates/src/components/storykeep/email-builder/PreviewModal.tsx

@@ -0,0 +1,136 @@
+import { useState, useEffect } from 'react';
+import { emailHelpers, type EmailTemplate } from '@/utils/api/emailHelpers';
+
+interface PreviewModalProps {
+  template: EmailTemplate;
+  onClose: () => void;
+}
+
+export default function PreviewModal({ template, onClose }: PreviewModalProps) {
+  const [variables, setVariables] = useState<string[]>([]);
+  const [mockData, setMockData] = useState<Record<string, string>>({});
+  const [html, setHtml] = useState<string>('');
+  const [subject, setSubject] = useState<string>('');
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    const rawString = JSON.stringify(template);
+    const regex = /\{\{\.([a-zA-Z0-9_]+)\}\}/g;
+    const found = new Set<string>();
+
+    let match;
+    while ((match = regex.exec(rawString)) !== null) {
+      found.add(match[1]);
+    }
+
+    setVariables(Array.from(found));
+
+    const initialData: Record<string, string> = {};
+    found.forEach((v) => {
+      initialData[v] = `[${v}]`;
+    });
+    setMockData(initialData);
+  }, [template]);
+
+  const handleGenerate = async () => {
+    try {
+      setError(null);
+      const res = await emailHelpers.previewTemplate(template, mockData);
+      setHtml(res.html);
+      setSubject(res.subject);
+    } catch (err) {
+      setError(
+        err instanceof Error ? err.message : 'Preview generation failed'
+      );
+    }
+  };
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-gray-900 bg-opacity-75 p-4 backdrop-blur-sm">
+      <div
+        className="flex h-full w-full max-w-6xl flex-col overflow-hidden rounded-lg bg-white shadow-xl md:flex-row"
+        style={{ maxHeight: '90vh' }}
+      >
+        <div className="w-full border-r border-gray-200 bg-gray-50 p-6 md:w-80">
+          <div className="mb-6 flex items-center justify-between">
+            <h3 className="text-lg font-bold text-gray-900">Mock Data</h3>
+            <button
+              onClick={onClose}
+              className="text-gray-400 hover:text-gray-900 md:hidden"
+            >
+              &times;
+            </button>
+          </div>
+
+          {variables.length === 0 ? (
+            <p className="text-sm text-gray-500">
+              No template variables found.
+            </p>
+          ) : (
+            <div className="space-y-4">
+              {variables.map((v) => (
+                <div key={v}>
+                  <label className="mb-1 block text-xs font-bold text-gray-700">
+                    {v}
+                  </label>
+                  <input
+                    type="text"
+                    value={mockData[v] || ''}
+                    onChange={(e) =>
+                      setMockData({ ...mockData, [v]: e.target.value })
+                    }
+                    className="w-full rounded-md border border-gray-300 px-3 py-2 text-sm focus:border-cyan-500 focus:ring-cyan-500"
+                  />
+                </div>
+              ))}
+            </div>
+          )}
+
+          <button
+            onClick={handleGenerate}
+            className="mt-8 w-full rounded-md bg-cyan-600 px-4 py-2 text-sm font-bold text-white hover:bg-cyan-500"
+          >
+            Generate Preview
+          </button>
+
+          {error && (
+            <p className="mt-4 text-xs font-bold text-red-600">{error}</p>
+          )}
+        </div>
+
+        <div className="flex flex-1 flex-col overflow-hidden bg-white">
+          <div className="flex items-center justify-between border-b border-gray-200 px-6 py-4">
+            <div className="flex flex-col">
+              <span className="text-xs font-bold text-gray-500">Subject</span>
+              <span className="text-sm font-bold text-gray-900">
+                {subject || 'Generate preview to view subject...'}
+              </span>
+            </div>
+            <button
+              onClick={onClose}
+              className="hidden text-gray-400 hover:text-gray-900 md:block"
+            >
+              &times; Close
+            </button>
+          </div>
+
+          <div className="flex-1 bg-gray-100 p-8">
+            <div className="mx-auto h-full w-full max-w-2xl overflow-hidden rounded bg-white shadow-lg">
+              {html ? (
+                <iframe
+                  srcDoc={html}
+                  className="h-full w-full border-0"
+                  title="Email Preview"
+                />
+              ) : (
+                <div className="flex h-full items-center justify-center text-sm font-bold text-gray-400">
+                  Awaiting preview generation...
+                </div>
+              )}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}