email-builder-pro 1.0.0

package/components/EmailBuilder.tsx

@@ -0,0 +1,59 @@
+'use client';
+
+import { useState } from 'react';
+import ComponentPalette from './ComponentPalette';
+import Canvas from './Canvas';
+import PropertiesPanel from './PropertiesPanel';
+import PreviewPanel from './PreviewPanel';
+import Toolbar from './Toolbar';
+import TemplateManager from './TemplateManager';
+import { useEmailBuilder } from '@/lib/store';
+
+export default function EmailBuilder() {
+  const [showPreview, setShowPreview] = useState(false);
+  const [showTemplates, setShowTemplates] = useState(false);
+  const { components } = useEmailBuilder();
+
+  return (
+    <div className="h-screen flex flex-col bg-gray-50">
+      <Toolbar
+        onPreview={() => setShowPreview(!showPreview)}
+        onTemplates={() => setShowTemplates(!showTemplates)}
+        showPreview={showPreview}
+      />
+      
+      <div className="flex-1 flex overflow-hidden">
+        {/* Component Palette */}
+        <div className="w-64 bg-white border-r border-gray-200 overflow-y-auto">
+          <ComponentPalette />
+        </div>
+
+        {/* Main Canvas */}
+        <div className="flex-1 flex flex-col overflow-hidden">
+          <Canvas />
+        </div>
+
+        {/* Properties Panel */}
+        {!showPreview && (
+          <div className="w-80 bg-white border-l border-gray-200 overflow-y-auto">
+            <PropertiesPanel />
+          </div>
+        )}
+
+        {/* Preview Panel */}
+        {showPreview && (
+          <div className="w-1/2 bg-white border-l border-gray-200 overflow-y-auto">
+            <PreviewPanel />
+          </div>
+        )}
+      </div>
+
+      {/* Template Manager Modal */}
+      {showTemplates && (
+        <TemplateManager onClose={() => setShowTemplates(false)} />
+      )}
+    </div>
+  );
+}
+
+

package/components/ImageUpload.tsx

@@ -0,0 +1,186 @@
+'use client';
+
+import { useState, useRef } from 'react';
+import { Upload, X, Maximize2 } from 'lucide-react';
+
+interface ImageUploadProps {
+  value: string;
+  onChange: (url: string) => void;
+  onResize?: (width: number, height: number) => void;
+}
+
+export default function ImageUpload({ value, onChange, onResize }: ImageUploadProps) {
+  const [isUploading, setIsUploading] = useState(false);
+  const [showResizer, setShowResizer] = useState(false);
+  const [resizeWidth, setResizeWidth] = useState(400);
+  const [resizeHeight, setResizeHeight] = useState(300);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+
+  const handleFileSelect = async (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    if (!file) return;
+
+    if (!file.type.startsWith('image/')) {
+      alert('Please select an image file');
+      return;
+    }
+
+    setIsUploading(true);
+
+    try {
+      // Convert to base64 for preview (in production, upload to server)
+      const reader = new FileReader();
+      reader.onload = (event) => {
+        const base64 = event.target?.result as string;
+        onChange(base64);
+        
+        // Get image dimensions
+        const img = new window.Image();
+        img.onload = () => {
+          setResizeWidth(img.width);
+          setResizeHeight(img.height);
+        };
+        img.src = base64;
+        setIsUploading(false);
+      };
+      reader.readAsDataURL(file);
+    } catch (error) {
+      console.error('Error uploading image:', error);
+      setIsUploading(false);
+    }
+  };
+
+  const handleResize = () => {
+    if (!value || !canvasRef.current) return;
+
+    const img = new window.Image();
+    img.onload = () => {
+      const canvas = canvasRef.current!;
+      canvas.width = resizeWidth;
+      canvas.height = resizeHeight;
+      const ctx = canvas.getContext('2d');
+      if (ctx) {
+        ctx.drawImage(img, 0, 0, resizeWidth, resizeHeight);
+        const resizedDataUrl = canvas.toDataURL('image/png');
+        onChange(resizedDataUrl);
+        if (onResize) {
+          onResize(resizeWidth, resizeHeight);
+        }
+        setShowResizer(false);
+      }
+    };
+    img.src = value;
+  };
+
+  return (
+    <div className="space-y-4">
+      <div>
+        <label className="block text-xs font-medium text-gray-700 mb-1">
+          Image
+        </label>
+        {value ? (
+          <div className="relative group">
+            {/* eslint-disable-next-line @next/next/no-img-element */}
+            <img
+              src={value}
+              alt="Preview"
+              className="w-full h-32 object-cover rounded-md border border-gray-300"
+            />
+            <div className="absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-50 transition-all rounded-md flex items-center justify-center gap-2">
+              <button
+                onClick={() => fileInputRef.current?.click()}
+                className="opacity-0 group-hover:opacity-100 p-2 bg-white rounded-md hover:bg-gray-100 transition-all"
+              >
+                <Upload size={16} />
+              </button>
+              <button
+                onClick={() => setShowResizer(true)}
+                className="opacity-0 group-hover:opacity-100 p-2 bg-white rounded-md hover:bg-gray-100 transition-all"
+              >
+                <Maximize2 size={16} />
+              </button>
+              <button
+                onClick={() => onChange('')}
+                className="opacity-0 group-hover:opacity-100 p-2 bg-white rounded-md hover:bg-gray-100 transition-all"
+              >
+                <X size={16} />
+              </button>
+            </div>
+          </div>
+        ) : (
+          <div
+            onClick={() => fileInputRef.current?.click()}
+            className="border-2 border-dashed border-gray-300 rounded-md p-8 text-center cursor-pointer hover:border-primary-400 transition-colors"
+          >
+            <Upload className="mx-auto mb-2 text-gray-400" size={24} />
+            <p className="text-sm text-gray-600">
+              {isUploading ? 'Uploading...' : 'Click to upload image'}
+            </p>
+          </div>
+        )}
+        <input
+          ref={fileInputRef}
+          type="file"
+          accept="image/*"
+          onChange={handleFileSelect}
+          className="hidden"
+        />
+      </div>
+
+      {showResizer && value && (
+        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
+          <div className="bg-white rounded-lg p-6 w-full max-w-2xl">
+            <h3 className="text-lg font-semibold mb-4">Resize Image</h3>
+            <div className="grid grid-cols-2 gap-4 mb-4">
+              <div>
+                <label className="block text-xs font-medium text-gray-700 mb-1">
+                  Width (px)
+                </label>
+                <input
+                  type="number"
+                  value={resizeWidth}
+                  onChange={(e) => setResizeWidth(parseInt(e.target.value) || 0)}
+                  className="w-full px-3 py-2 border border-gray-300 rounded-md text-sm"
+                />
+              </div>
+              <div>
+                <label className="block text-xs font-medium text-gray-700 mb-1">
+                  Height (px)
+                </label>
+                <input
+                  type="number"
+                  value={resizeHeight}
+                  onChange={(e) => setResizeHeight(parseInt(e.target.value) || 0)}
+                  className="w-full px-3 py-2 border border-gray-300 rounded-md text-sm"
+                />
+              </div>
+            </div>
+            <div className="mb-4 border border-gray-300 rounded-md p-4 bg-gray-50">
+              <canvas
+                ref={canvasRef}
+                className="max-w-full h-auto mx-auto"
+                style={{ maxHeight: '400px' }}
+              />
+            </div>
+            <div className="flex justify-end gap-2">
+              <button
+                onClick={() => setShowResizer(false)}
+                className="px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-100 rounded-md"
+              >
+                Cancel
+              </button>
+              <button
+                onClick={handleResize}
+                className="px-4 py-2 text-sm font-medium bg-primary-500 text-white rounded-md hover:bg-primary-600"
+              >
+                Apply Resize
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+

package/components/NumberInput.tsx

@@ -0,0 +1,73 @@
+'use client';
+
+import { ChevronUp, ChevronDown } from 'lucide-react';
+
+interface NumberInputProps {
+  label: string;
+  value: number;
+  onChange: (value: number) => void;
+  min?: number;
+  max?: number;
+  step?: number;
+  unit?: string;
+}
+
+export default function NumberInput({
+  label,
+  value,
+  onChange,
+  min = 0,
+  max = 1000,
+  step = 1,
+  unit = '',
+}: NumberInputProps) {
+  const handleIncrement = () => {
+    const newValue = Math.min(value + step, max);
+    onChange(newValue);
+  };
+
+  const handleDecrement = () => {
+    const newValue = Math.max(value - step, min);
+    onChange(newValue);
+  };
+
+  return (
+    <div className="mb-4">
+      <label className="block text-xs font-medium text-gray-700 mb-1">
+        {label} {unit && `(${unit})`}
+      </label>
+      <div className="flex items-center gap-1">
+        <button
+          type="button"
+          onClick={handleDecrement}
+          disabled={value <= min}
+          className="p-1.5 border border-gray-300 rounded-l-md hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+        >
+          <ChevronDown size={14} />
+        </button>
+        <input
+          type="number"
+          value={value}
+          onChange={(e) => {
+            const val = parseInt(e.target.value) || 0;
+            onChange(Math.max(min, Math.min(val, max)));
+          }}
+          min={min}
+          max={max}
+          step={step}
+          className="flex-1 px-3 py-2 border-t border-b border-gray-300 text-sm text-center focus:outline-none focus:ring-2 focus:ring-primary-500"
+        />
+        <button
+          type="button"
+          onClick={handleIncrement}
+          disabled={value >= max}
+          className="p-1.5 border border-gray-300 rounded-r-md hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+        >
+          <ChevronUp size={14} />
+        </button>
+      </div>
+    </div>
+  );
+}
+
+

package/components/PreviewPanel.tsx

@@ -0,0 +1,125 @@
+'use client';
+
+import { useEmailBuilder } from '@/lib/store';
+import ComponentRenderer from './ComponentRenderer';
+import {
+  Html,
+  Head,
+  Body,
+  Container,
+  Preview,
+  Tailwind,
+} from '@react-email/components';
+
+export default function PreviewPanel() {
+  const { components } = useEmailBuilder();
+
+  return (
+    <div className="h-full flex flex-col">
+      <div className="p-4 border-b border-gray-200 bg-white">
+        <h2 className="text-sm font-semibold text-gray-700">Live Preview</h2>
+        <p className="text-xs text-gray-500 mt-1">
+          Real-time preview of your email template
+        </p>
+      </div>
+
+      <div className="flex-1 overflow-y-auto bg-gray-100 p-8">
+        <div className="max-w-2xl mx-auto bg-white shadow-lg rounded-lg p-8">
+          {components.length === 0 ? (
+            <div className="text-center py-12">
+              <p className="text-gray-400">No components to preview</p>
+            </div>
+          ) : (
+            <div className="email-preview">
+              {components.map((component, index) => (
+                <ComponentRenderer
+                  key={component.id}
+                  component={component}
+                  index={index}
+                />
+              ))}
+            </div>
+          )}
+        </div>
+      </div>
+
+      {/* React Email Preview */}
+      <div className="border-t border-gray-200 bg-white p-4">
+        <details className="text-sm">
+          <summary className="cursor-pointer font-medium text-gray-700 hover:text-gray-900">
+            React Email Code Preview
+          </summary>
+          <div className="mt-4 p-4 bg-gray-50 rounded-md overflow-x-auto">
+            <pre className="text-xs text-gray-700">
+              {generateReactEmailCode(components)}
+            </pre>
+          </div>
+        </details>
+      </div>
+    </div>
+  );
+}
+
+function generateReactEmailCode(components: any[]): string {
+  return `import {
+  Body,
+  Container,
+  Head,
+  Html,
+  Preview,
+  Tailwind,
+  Text,
+  Heading,
+  Button,
+  Img,
+  Hr,
+  Section,
+} from '@react-email/components';
+
+export default function EmailTemplate() {
+  return (
+    <Html>
+      <Head />
+      <Preview>Email Preview</Preview>
+      <Tailwind>
+        <Body className="mx-auto my-auto bg-white px-2 font-sans">
+          <Container className="mx-auto my-[40px] max-w-[600px]">
+${renderComponentsToReactEmail(components, 12)}
+          </Container>
+        </Body>
+      </Tailwind>
+    </Html>
+  );
+}`;
+}
+
+function renderComponentsToReactEmail(
+  components: any[],
+  indent: number
+): string {
+  const spaces = ' '.repeat(indent);
+  return components
+    .map((comp) => {
+      switch (comp.type) {
+        case 'text':
+          return `${spaces}<Text className="text-[${comp.props.fontSize || 16}px] text-[${comp.props.color || '#000000'}] text-${comp.props.textAlign || 'left'}">${comp.props.text || ''}</Text>`;
+        case 'heading':
+          const HeadingTag = `Heading`;
+          return `${spaces}<${HeadingTag} className="text-[${comp.props.fontSize || 24}px] text-[${comp.props.color || '#000000'}] text-${comp.props.textAlign || 'left'}">${comp.props.text || ''}</${HeadingTag}>`;
+        case 'button':
+          return `${spaces}<Button href="${comp.props.href || '#'}" className="bg-[${comp.props.backgroundColor || '#007bff'}] text-[${comp.props.color || '#ffffff'}] px-[${(comp.props.padding || 12) * 2}px] py-[${comp.props.padding || 12}px] rounded-[${comp.props.borderRadius || 4}px]">${comp.props.text || 'Button'}</Button>`;
+        case 'image':
+          return `${spaces}<Img src="${comp.props.src || ''}" alt="${comp.props.alt || ''}" width="${comp.props.width || '100%'}" />`;
+        case 'divider':
+          return `${spaces}<Hr className="border-[${comp.props.color || '#e0e0e0'}] border-t-[${comp.props.height || 1}px]" />`;
+        case 'container':
+          return `${spaces}<Section className="bg-[${comp.props.backgroundColor || '#ffffff'}] p-[${comp.props.padding || 20}px] m-[${comp.props.margin || 0}px]">\n${comp.children ? renderComponentsToReactEmail(comp.children, indent + 2) : ''}\n${spaces}</Section>`;
+        default:
+          return '';
+      }
+    })
+    .filter(Boolean)
+    .join('\n');
+}
+
+