email-builder-pro 1.0.0

package/components/ComponentRenderer.tsx

@@ -0,0 +1,496 @@
+'use client';
+
+import { EmailComponent } from '@/types/email';
+import DroppableComponent from './DroppableComponent';
+import DraggableComponent from './DraggableComponent';
+
+interface ComponentRendererProps {
+  component: EmailComponent;
+  index: number;
+  parentId?: string | null;
+}
+
+export default function ComponentRenderer({
+  component,
+  index,
+  parentId,
+}: ComponentRendererProps) {
+  // Helper to build margin style
+  const getMarginStyle = (props: any) => {
+    if (props.marginTop !== undefined || props.marginBottom !== undefined || 
+        props.marginLeft !== undefined || props.marginRight !== undefined) {
+      return {
+        marginTop: props.marginTop !== undefined ? `${props.marginTop}px` : '0',
+        marginBottom: props.marginBottom !== undefined ? `${props.marginBottom}px` : '0',
+        marginLeft: props.marginLeft !== undefined ? `${props.marginLeft}px` : '0',
+        marginRight: props.marginRight !== undefined ? `${props.marginRight}px` : '0',
+      };
+    }
+    return props.margin ? { margin: `${props.margin}px` } : {};
+  };
+
+  // Helper to build padding style
+  const getPaddingStyle = (props: any) => {
+    if (props.paddingTop !== undefined || props.paddingBottom !== undefined || 
+        props.paddingLeft !== undefined || props.paddingRight !== undefined) {
+      return {
+        paddingTop: props.paddingTop !== undefined ? `${props.paddingTop}px` : props.padding ? `${props.padding}px` : '0',
+        paddingBottom: props.paddingBottom !== undefined ? `${props.paddingBottom}px` : props.padding ? `${props.padding}px` : '0',
+        paddingLeft: props.paddingLeft !== undefined ? `${props.paddingLeft}px` : props.padding ? `${props.padding}px` : '0',
+        paddingRight: props.paddingRight !== undefined ? `${props.paddingRight}px` : props.padding ? `${props.padding}px` : '0',
+      };
+    }
+    return props.padding ? { padding: `${props.padding}px` } : {};
+  };
+
+  const renderComponent = () => {
+    switch (component.type) {
+      case 'container':
+        return (
+          <DroppableComponent component={component} index={index}>
+            <div
+              style={{
+                backgroundColor: component.props.backgroundColor || '#ffffff',
+                ...getPaddingStyle(component.props),
+                ...getMarginStyle(component.props),
+                borderWidth: component.props.borderWidth ? `${component.props.borderWidth}px` : '0',
+                borderStyle: component.props.borderWidth ? 'solid' : 'none',
+                borderColor: component.props.borderColor || '#e0e0e0',
+                borderRadius: component.props.borderRadius ? `${component.props.borderRadius}px` : '0',
+                minHeight: '40px',
+              }}
+            >
+              {component.children && component.children.length > 0 ? (
+                component.children.map((child, i) => (
+                  <DraggableComponent
+                    key={child.id}
+                    component={child}
+                    index={i}
+                    parentId={component.id}
+                  />
+                ))
+              ) : (
+                <div className="text-gray-300 text-xs text-center py-2">
+                  Drop components here
+                </div>
+              )}
+            </div>
+          </DroppableComponent>
+        );
+
+      case 'text':
+        return (
+          <p
+            style={{
+              fontSize: `${component.props.fontSize || 16}px`,
+              color: component.props.color || '#000000',
+              textAlign: component.props.textAlign || 'left',
+              fontWeight: component.props.fontWeight || 'normal',
+              fontFamily: component.props.fontFamily || 'Arial',
+              lineHeight: component.props.lineHeight || 1.5,
+              backgroundColor: component.props.backgroundColor || 'transparent',
+              ...getMarginStyle(component.props),
+            }}
+          >
+            {component.props.text || ''}
+          </p>
+        );
+
+      case 'heading':
+        const HeadingTag = `h${component.props.level || 1}` as keyof JSX.IntrinsicElements;
+        return (
+          <HeadingTag
+            style={{
+              fontSize: `${component.props.fontSize || 24}px`,
+              color: component.props.color || '#000000',
+              textAlign: component.props.textAlign || 'left',
+              fontWeight: component.props.fontWeight || 'bold',
+              ...getMarginStyle(component.props),
+            }}
+          >
+            {component.props.text || ''}
+          </HeadingTag>
+        );
+
+      case 'button':
+        return (
+          <a
+            href={component.props.href || '#'}
+            style={{
+              display: 'inline-block',
+              backgroundColor: component.props.backgroundColor || '#007bff',
+              color: component.props.color || '#ffffff',
+              padding: `${component.props.paddingY || component.props.padding || 12}px ${component.props.paddingX || (component.props.padding || 12) * 2}px`,
+              borderRadius: `${component.props.borderRadius || 4}px`,
+              textDecoration: 'none',
+              textAlign: 'center',
+              fontSize: `${component.props.fontSize || 14}px`,
+              fontWeight: component.props.fontWeight || '600',
+              borderWidth: component.props.borderWidth ? `${component.props.borderWidth}px` : '0',
+              borderStyle: component.props.borderWidth ? 'solid' : 'none',
+              borderColor: component.props.borderColor || '#000000',
+              ...getMarginStyle(component.props),
+            }}
+          >
+            {component.props.text || 'Button'}
+          </a>
+        );
+
+      case 'image':
+        return (
+          // eslint-disable-next-line @next/next/no-img-element
+          <img
+            src={component.props.src || ''}
+            alt={component.props.alt || ''}
+            style={{
+              width: component.props.width || '100%',
+              height: component.props.height || 'auto',
+              display: 'block',
+              marginLeft: component.props.align === 'center' ? 'auto' : component.props.align === 'right' ? 'auto' : '0',
+              marginRight: component.props.align === 'center' ? 'auto' : component.props.align === 'right' ? '0' : 'auto',
+              ...getMarginStyle(component.props),
+            }}
+          />
+        );
+
+      case 'divider':
+        return (
+          <hr
+            style={{
+              border: 'none',
+              borderTop: `${component.props.height || 1}px solid ${component.props.color || '#e0e0e0'}`,
+              ...getMarginStyle(component.props),
+            }}
+          />
+        );
+
+      case 'spacer':
+        return (
+          <div
+            style={{
+              height: `${component.props.height || 20}px`,
+            }}
+          />
+        );
+
+      case 'row':
+        return (
+          <DroppableComponent component={component} index={index}>
+            <div
+              style={{
+                display: 'flex',
+                gap: `${component.props.gap || 10}px`,
+                justifyContent: component.props.justifyContent || 'flex-start',
+                ...getMarginStyle(component.props),
+                minHeight: '40px',
+              }}
+            >
+              {component.children && component.children.length > 0 ? (
+                component.children.map((child, i) => (
+                  <DraggableComponent
+                    key={child.id}
+                    component={child}
+                    index={i}
+                    parentId={component.id}
+                  />
+                ))
+              ) : (
+                <div className="text-gray-300 text-xs text-center py-2 flex-1">
+                  Drop components here
+                </div>
+              )}
+            </div>
+          </DroppableComponent>
+        );
+
+      case 'column':
+        return (
+          <DroppableComponent component={component} index={index}>
+            <div
+              style={{
+                width: component.props.width || '50%',
+                ...getMarginStyle(component.props),
+                minHeight: '40px',
+              }}
+            >
+              {component.children && component.children.length > 0 ? (
+                component.children.map((child, i) => (
+                  <DraggableComponent
+                    key={child.id}
+                    component={child}
+                    index={i}
+                    parentId={component.id}
+                  />
+                ))
+              ) : (
+                <div className="text-gray-300 text-xs text-center py-2">
+                  Drop components here
+                </div>
+              )}
+            </div>
+          </DroppableComponent>
+        );
+
+      case 'header':
+        return (
+          <DroppableComponent component={component} index={index}>
+            <div
+              style={{
+                backgroundColor: component.props.backgroundColor || '#ffffff',
+                ...getPaddingStyle(component.props),
+                ...getMarginStyle(component.props),
+                borderBottom: component.props.borderBottom ? `1px solid ${component.props.borderColor || '#e0e0e0'}` : 'none',
+              }}
+            >
+              {component.props.showLogo && component.props.logoUrl && (
+                // eslint-disable-next-line @next/next/no-img-element
+                <img
+                  src={component.props.logoUrl}
+                  alt={component.props.logoAlt || 'Logo'}
+                  style={{
+                    height: component.props.logoHeight || '40px',
+                    marginBottom: component.props.logoMarginBottom || '0',
+                  }}
+                />
+              )}
+              {component.children && component.children.length > 0 ? (
+                component.children.map((child, i) => (
+                  <DraggableComponent
+                    key={child.id}
+                    component={child}
+                    index={i}
+                    parentId={component.id}
+                  />
+                ))
+              ) : (
+                <div className="text-gray-300 text-xs text-center py-2">
+                  Drop header content here
+                </div>
+              )}
+            </div>
+          </DroppableComponent>
+        );
+
+      case 'footer':
+        return (
+          <DroppableComponent component={component} index={index}>
+            <div
+              style={{
+                backgroundColor: component.props.backgroundColor || '#f5f5f5',
+                ...getPaddingStyle(component.props),
+                ...getMarginStyle(component.props),
+                borderTop: component.props.borderTop ? `1px solid ${component.props.borderColor || '#e0e0e0'}` : 'none',
+                textAlign: component.props.textAlign || 'center',
+              }}
+            >
+              {component.children && component.children.length > 0 ? (
+                component.children.map((child, i) => (
+                  <DraggableComponent
+                    key={child.id}
+                    component={child}
+                    index={i}
+                    parentId={component.id}
+                  />
+                ))
+              ) : (
+                <>
+                  {component.props.showSocialLinks && (
+                    <div style={{ marginBottom: '15px' }}>
+                      {/* Social links will be rendered here if added as children */}
+                    </div>
+                  )}
+                  {component.props.copyright && (
+                    <p
+                      style={{
+                        fontSize: `${component.props.fontSize || 12}px`,
+                        color: component.props.color || '#666666',
+                        margin: '10px 0',
+                      }}
+                    >
+                      {component.props.copyright}
+                    </p>
+                  )}
+                </>
+              )}
+            </div>
+          </DroppableComponent>
+        );
+
+      case 'section':
+        return (
+          <DroppableComponent component={component} index={index}>
+            <div
+              style={{
+                backgroundColor: component.props.backgroundColor || '#ffffff',
+                ...getPaddingStyle(component.props),
+                ...getMarginStyle(component.props),
+                minHeight: '40px',
+              }}
+            >
+              {component.children && component.children.length > 0 ? (
+                component.children.map((child, i) => (
+                  <DraggableComponent
+                    key={child.id}
+                    component={child}
+                    index={i}
+                    parentId={component.id}
+                  />
+                ))
+              ) : (
+                <div className="text-gray-300 text-xs text-center py-2">
+                  Drop section content here
+                </div>
+              )}
+            </div>
+          </DroppableComponent>
+        );
+
+      case 'link':
+        return (
+          <a
+            href={component.props.href || '#'}
+            style={{
+              color: component.props.color || '#007bff',
+              textDecoration: component.props.underline ? 'underline' : 'none',
+              fontSize: `${component.props.fontSize || 16}px`,
+              ...getMarginStyle(component.props),
+            }}
+          >
+            {component.props.text || 'Link'}
+          </a>
+        );
+
+      case 'list':
+        const ListTag = component.props.listType === 'ordered' ? 'ol' : 'ul';
+        return (
+          <ListTag
+            style={{
+              fontSize: `${component.props.fontSize || 16}px`,
+              color: component.props.color || '#000000',
+              paddingLeft: '20px',
+              ...getMarginStyle(component.props),
+            }}
+          >
+            {(component.props.items || []).map((item: string, i: number) => (
+              <li key={i} style={{ marginBottom: '5px' }}>
+                {item}
+              </li>
+            ))}
+          </ListTag>
+        );
+
+      case 'table':
+        return (
+          <table
+            style={{
+              width: '100%',
+              borderCollapse: 'collapse',
+              ...getMarginStyle(component.props),
+            }}
+          >
+            {component.props.headers && (
+              <thead>
+                <tr>
+                  {component.props.headers.map((header: string, i: number) => (
+                    <th
+                      key={i}
+                      style={{
+                        border: `${component.props.borderWidth || 1}px solid ${component.props.borderColor || '#e0e0e0'}`,
+                        padding: `${component.props.cellPadding || 10}px`,
+                        backgroundColor: component.props.headerBackgroundColor || '#f5f5f5',
+                        textAlign: 'left',
+                        fontWeight: 'bold',
+                      }}
+                    >
+                      {header}
+                    </th>
+                  ))}
+                </tr>
+              </thead>
+            )}
+            <tbody>
+              {(component.props.rows || []).map((row: string[], i: number) => (
+                <tr key={i}>
+                  {row.map((cell: string, j: number) => (
+                    <td
+                      key={j}
+                      style={{
+                        border: `${component.props.borderWidth || 1}px solid ${component.props.borderColor || '#e0e0e0'}`,
+                        padding: `${component.props.cellPadding || 10}px`,
+                      }}
+                    >
+                      {cell}
+                    </td>
+                  ))}
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        );
+
+      case 'social-links':
+        const socialLinks = [];
+        if (component.props.facebook) socialLinks.push({ name: 'Facebook', url: component.props.facebook, icon: '📘' });
+        if (component.props.twitter) socialLinks.push({ name: 'Twitter', url: component.props.twitter, icon: '🐦' });
+        if (component.props.instagram) socialLinks.push({ name: 'Instagram', url: component.props.instagram, icon: '📷' });
+        if (component.props.linkedin) socialLinks.push({ name: 'LinkedIn', url: component.props.linkedin, icon: '💼' });
+        if (component.props.youtube) socialLinks.push({ name: 'YouTube', url: component.props.youtube, icon: '📺' });
+
+        return (
+          <div
+            style={{
+              display: 'flex',
+              gap: `${component.props.gap || 10}px`,
+              justifyContent: component.props.align || 'center',
+              ...getMarginStyle(component.props),
+            }}
+          >
+            {socialLinks.map((link, i) => (
+              <a
+                key={i}
+                href={link.url}
+                style={{
+                  fontSize: `${component.props.iconSize || 24}px`,
+                  textDecoration: 'none',
+                  display: 'inline-block',
+                }}
+                title={link.name}
+              >
+                {link.icon}
+              </a>
+            ))}
+            {socialLinks.length === 0 && (
+              <span className="text-gray-400 text-xs">Add social links in properties</span>
+            )}
+          </div>
+        );
+
+      case 'quote':
+        return (
+          <blockquote
+            style={{
+              fontSize: `${component.props.fontSize || 18}px`,
+              color: component.props.color || '#666666',
+              fontStyle: 'italic',
+              borderLeft: component.props.borderLeft ? `4px solid ${component.props.borderColor || '#007bff'}` : 'none',
+              paddingLeft: component.props.borderLeft ? '20px' : '0',
+              margin: '20px 0',
+              ...getMarginStyle(component.props),
+            }}
+          >
+            <p style={{ margin: '0 0 10px 0' }}>{component.props.text || ''}</p>
+            {component.props.author && (
+              <cite style={{ fontSize: '14px', color: '#999' }}>
+                — {component.props.author}
+              </cite>
+            )}
+          </blockquote>
+        );
+
+      default:
+        return <div>Unknown component type</div>;
+    }
+  };
+
+  return <>{renderComponent()}</>;
+}

package/components/DraggableComponent.tsx

@@ -0,0 +1,84 @@
+'use client';
+
+import { useDrag, useDrop } from 'react-dnd';
+import { EmailComponent } from '@/types/email';
+import { useEmailBuilder } from '@/lib/store';
+import ComponentRenderer from './ComponentRenderer';
+import { Trash2, GripVertical } from 'lucide-react';
+
+interface DraggableComponentProps {
+  component: EmailComponent;
+  index: number;
+  parentId?: string | null;
+}
+
+export default function DraggableComponent({
+  component,
+  index,
+  parentId,
+}: DraggableComponentProps) {
+  const { selectedComponent, selectComponent, removeComponent, moveComponent } =
+    useEmailBuilder();
+
+  const [{ isDragging }, drag] = useDrag({
+    type: 'existing-component',
+    item: { id: component.id, index, parentId },
+    collect: (monitor) => ({
+      isDragging: monitor.isDragging(),
+    }),
+  });
+
+  const [{ isOver }, drop] = useDrop({
+    accept: 'existing-component',
+    drop: (item: { id: string; index: number; parentId?: string | null }) => {
+      if (item.id !== component.id && item.parentId === parentId) {
+        // Move component to new position
+        moveComponent(item.index, index);
+      }
+    },
+    collect: (monitor) => ({
+      isOver: monitor.isOver(),
+    }),
+  });
+
+  const ref = (node: HTMLDivElement | null) => {
+    drag(drop(node));
+  };
+
+  return (
+    <div
+      ref={ref as any}
+      className={`relative group mb-2 ${
+        selectedComponent === component.id
+          ? 'ring-2 ring-primary-500'
+          : ''
+      } ${isDragging ? 'opacity-50' : ''} ${isOver ? 'ring-2 ring-blue-400' : ''}`}
+      onClick={(e) => {
+        e.stopPropagation();
+        selectComponent(component.id);
+      }}
+    >
+      <div className="absolute -left-8 top-0 opacity-0 group-hover:opacity-100 transition-opacity">
+        <div className="p-1 bg-gray-100 rounded cursor-move">
+          <GripVertical size={14} className="text-gray-400" />
+        </div>
+      </div>
+      <ComponentRenderer component={component} index={index} parentId={parentId} />
+      {selectedComponent === component.id && (
+        <div className="absolute -top-8 left-0 flex gap-1">
+          <button
+            onClick={(e) => {
+              e.stopPropagation();
+              removeComponent(component.id);
+              selectComponent(null);
+            }}
+            className="p-1 bg-red-500 text-white rounded text-xs hover:bg-red-600"
+          >
+            <Trash2 size={12} />
+          </button>
+        </div>
+      )}
+    </div>
+  );
+}
+

package/components/DroppableComponent.tsx

@@ -0,0 +1,80 @@
+'use client';
+
+import { useDrop } from 'react-dnd';
+import { EmailComponent } from '@/types/email';
+import { useEmailBuilder } from '@/lib/store';
+import ComponentRenderer from './ComponentRenderer';
+
+interface DroppableComponentProps {
+  component: EmailComponent;
+  children: React.ReactNode;
+  index: number;
+}
+
+export default function DroppableComponent({
+  component,
+  children,
+  index,
+}: DroppableComponentProps) {
+  const { addComponent } = useEmailBuilder();
+
+  const [{ isOver }, drop] = useDrop({
+    accept: 'component',
+    drop: (item: { type: string; defaultProps: Record<string, any> }, monitor) => {
+      // Only handle drop if this is the target (not a child)
+      if (monitor.didDrop()) {
+        return;
+      }
+      // Generate unique ID with timestamp and random number
+      const newComponent: EmailComponent = {
+        id: `${Date.now()}-${Math.random().toString(36).substr(2, 9)}`,
+        type: item.type as EmailComponent['type'],
+        props: item.defaultProps,
+      };
+      addComponent(newComponent, undefined, component.id);
+    },
+    collect: (monitor) => ({
+      isOver: monitor.isOver({ shallow: true }) && !monitor.didDrop(),
+    }),
+  });
+
+  // Only make droppable if component can have children
+  const canHaveChildren =
+    component.type === 'container' ||
+    component.type === 'row' ||
+    component.type === 'column' ||
+    component.type === 'header' ||
+    component.type === 'footer' ||
+    component.type === 'section';
+
+  if (!canHaveChildren) {
+    return <>{children}</>;
+  }
+
+  return (
+    <div
+      ref={drop as any}
+      className={`relative ${isOver ? 'ring-2 ring-primary-400 ring-dashed' : ''}`}
+      style={{
+        minHeight: isOver ? '60px' : 'auto',
+        transition: 'all 0.2s',
+        position: 'relative',
+      }}
+    >
+      {children}
+      {isOver && (
+        <div 
+          className="absolute inset-0 bg-primary-50 bg-opacity-50 border-2 border-dashed border-primary-400 rounded flex items-center justify-center pointer-events-none z-10"
+          style={{
+            margin: '2px',
+          }}
+        >
+          <span className="text-primary-600 text-sm font-medium bg-white px-3 py-1 rounded shadow-sm">
+            Drop component here
+          </span>
+        </div>
+      )}
+    </div>
+  );
+}
+