email-builder-pro 1.0.0

package/components/TemplateManager.tsx

@@ -0,0 +1,104 @@
+'use client';
+
+import { useEmailBuilder } from '@/lib/store';
+import { X, Trash2, FolderOpen } from 'lucide-react';
+import { EmailTemplate } from '@/types/email';
+
+interface TemplateManagerProps {
+  onClose: () => void;
+}
+
+export default function TemplateManager({ onClose }: TemplateManagerProps) {
+  const { templates, loadTemplate, deleteTemplate, clearComponents } =
+    useEmailBuilder();
+
+  const handleLoadTemplate = (template: EmailTemplate) => {
+    loadTemplate(template);
+    onClose();
+  };
+
+  const handleDeleteTemplate = (id: string, e: React.MouseEvent) => {
+    e.stopPropagation();
+    if (confirm('Are you sure you want to delete this template?')) {
+      deleteTemplate(id);
+    }
+  };
+
+  return (
+    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
+      <div className="bg-white rounded-lg w-full max-w-2xl max-h-[80vh] flex flex-col">
+        <div className="p-6 border-b border-gray-200 flex items-center justify-between">
+          <h2 className="text-xl font-semibold text-gray-800">Templates</h2>
+          <button
+            onClick={onClose}
+            className="p-2 hover:bg-gray-100 rounded-md transition-colors"
+          >
+            <X size={20} />
+          </button>
+        </div>
+
+        <div className="flex-1 overflow-y-auto p-6">
+          {templates.length === 0 ? (
+            <div className="text-center py-12">
+              <FolderOpen size={48} className="mx-auto text-gray-300 mb-4" />
+              <p className="text-gray-400 mb-2">No templates saved yet</p>
+              <p className="text-sm text-gray-300">
+                Create and save templates to see them here
+              </p>
+            </div>
+          ) : (
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+              {templates.map((template) => (
+                <div
+                  key={template.id}
+                  className="border border-gray-200 rounded-lg p-4 hover:border-primary-300 hover:shadow-md transition-all cursor-pointer group"
+                  onClick={() => handleLoadTemplate(template)}
+                >
+                  <div className="flex items-start justify-between mb-2">
+                    <h3 className="font-medium text-gray-800">
+                      {template.name}
+                    </h3>
+                    <button
+                      onClick={(e) => handleDeleteTemplate(template.id, e)}
+                      className="opacity-0 group-hover:opacity-100 p-1 text-red-600 hover:bg-red-50 rounded transition-all"
+                    >
+                      <Trash2 size={16} />
+                    </button>
+                  </div>
+                  <p className="text-xs text-gray-500 mb-2">
+                    {template.components.length} component
+                    {template.components.length !== 1 ? 's' : ''}
+                  </p>
+                  <p className="text-xs text-gray-400">
+                    Created:{' '}
+                    {new Date(template.createdAt).toLocaleDateString()}
+                  </p>
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+
+        <div className="p-6 border-t border-gray-200 flex justify-end gap-2">
+          <button
+            onClick={() => {
+              clearComponents();
+              onClose();
+            }}
+            className="px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-100 rounded-md"
+          >
+            New Template
+          </button>
+          <button
+            onClick={onClose}
+            className="px-4 py-2 text-sm font-medium bg-primary-500 text-white rounded-md hover:bg-primary-600"
+          >
+            Close
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+

package/components/Toolbar.tsx

@@ -0,0 +1,242 @@
+'use client';
+
+import { Eye, Save, Download, FileText, FolderOpen } from 'lucide-react';
+import { useEmailBuilder } from '@/lib/store';
+import { useState } from 'react';
+
+interface ToolbarProps {
+  onPreview: () => void;
+  onTemplates: () => void;
+  showPreview: boolean;
+}
+
+export default function Toolbar({ onPreview, onTemplates, showPreview }: ToolbarProps) {
+  const { components, saveTemplate, clearComponents } = useEmailBuilder();
+  const [templateName, setTemplateName] = useState('');
+  const [showSaveDialog, setShowSaveDialog] = useState(false);
+
+  const handleSave = () => {
+    if (templateName.trim()) {
+      saveTemplate(templateName);
+      setTemplateName('');
+      setShowSaveDialog(false);
+    }
+  };
+
+  const handleExportHTML = () => {
+    const html = generateHTML(components);
+    const blob = new Blob([html], { type: 'text/html' });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = 'email-template.html';
+    a.click();
+    URL.revokeObjectURL(url);
+  };
+
+  const handleExportReact = () => {
+    const reactCode = generateReactComponent(components);
+    const blob = new Blob([reactCode], { type: 'text/tsx' });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = 'email-template.tsx';
+    a.click();
+    URL.revokeObjectURL(url);
+  };
+
+  return (
+    <div className="h-14 bg-white border-b border-gray-200 flex items-center justify-between px-4 shadow-sm">
+      <div className="flex items-center gap-2">
+        <h1 className="text-xl font-bold text-gray-800">Email Builder</h1>
+      </div>
+
+      <div className="flex items-center gap-2">
+        <button
+          onClick={onTemplates}
+          className="px-3 py-1.5 text-sm font-medium text-gray-700 hover:bg-gray-100 rounded-md flex items-center gap-2"
+        >
+          <FolderOpen size={16} />
+          Templates
+        </button>
+
+        <button
+          onClick={() => setShowSaveDialog(true)}
+          className="px-3 py-1.5 text-sm font-medium text-gray-700 hover:bg-gray-100 rounded-md flex items-center gap-2"
+        >
+          <Save size={16} />
+          Save
+        </button>
+
+        <div className="w-px h-6 bg-gray-300 mx-1" />
+
+        <button
+          onClick={handleExportHTML}
+          disabled={components.length === 0}
+          className="px-3 py-1.5 text-sm font-medium text-gray-700 hover:bg-gray-100 rounded-md flex items-center gap-2 disabled:opacity-50 disabled:cursor-not-allowed"
+        >
+          <Download size={16} />
+          Export HTML
+        </button>
+
+        <button
+          onClick={handleExportReact}
+          disabled={components.length === 0}
+          className="px-3 py-1.5 text-sm font-medium text-gray-700 hover:bg-gray-100 rounded-md flex items-center gap-2 disabled:opacity-50 disabled:cursor-not-allowed"
+        >
+          <FileText size={16} />
+          Export React
+        </button>
+
+        <div className="w-px h-6 bg-gray-300 mx-1" />
+
+        <button
+          onClick={onPreview}
+          className={`px-3 py-1.5 text-sm font-medium rounded-md flex items-center gap-2 ${
+            showPreview
+              ? 'bg-primary-500 text-white'
+              : 'text-gray-700 hover:bg-gray-100'
+          }`}
+        >
+          <Eye size={16} />
+          Preview
+        </button>
+      </div>
+
+      {showSaveDialog && (
+        <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-96">
+            <h2 className="text-lg font-semibold mb-4">Save Template</h2>
+            <input
+              type="text"
+              value={templateName}
+              onChange={(e) => setTemplateName(e.target.value)}
+              placeholder="Template name"
+              className="w-full px-3 py-2 border border-gray-300 rounded-md mb-4"
+              autoFocus
+              onKeyDown={(e) => {
+                if (e.key === 'Enter') handleSave();
+                if (e.key === 'Escape') setShowSaveDialog(false);
+              }}
+            />
+            <div className="flex justify-end gap-2">
+              <button
+                onClick={() => setShowSaveDialog(false)}
+                className="px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-100 rounded-md"
+              >
+                Cancel
+              </button>
+              <button
+                onClick={handleSave}
+                disabled={!templateName.trim()}
+                className="px-4 py-2 text-sm font-medium bg-primary-500 text-white rounded-md hover:bg-primary-600 disabled:opacity-50 disabled:cursor-not-allowed"
+              >
+                Save
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+function generateHTML(components: any[]): string {
+  // This is a simplified version - in production, you'd want a more robust HTML generator
+  return `<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Email Template</title>
+</head>
+<body>
+  ${renderComponentsToHTML(components)}
+</body>
+</html>`;
+}
+
+function renderComponentsToHTML(components: any[]): string {
+  return components.map(comp => {
+    switch (comp.type) {
+      case 'container':
+        return `<div style="${getStyles(comp.props)}">${comp.children ? renderComponentsToHTML(comp.children) : ''}</div>`;
+      case 'text':
+        return `<p style="${getStyles(comp.props)}">${comp.props.text || ''}</p>`;
+      case 'heading':
+        return `<h${comp.props.level || 1} style="${getStyles(comp.props)}">${comp.props.text || ''}</h${comp.props.level || 1}>`;
+      case 'button':
+        return `<a href="${comp.props.href || '#'}" style="${getStyles(comp.props)}">${comp.props.text || 'Button'}</a>`;
+      case 'image':
+        return `<img src="${comp.props.src || ''}" alt="${comp.props.alt || ''}" style="${getStyles(comp.props)}" />`;
+      case 'divider':
+        return `<hr style="${getStyles(comp.props)}" />`;
+      default:
+        return '';
+    }
+  }).join('');
+}
+
+function getStyles(props: any): string {
+  const styles: string[] = [];
+  if (props.backgroundColor) styles.push(`background-color: ${props.backgroundColor}`);
+  if (props.color) styles.push(`color: ${props.color}`);
+  if (props.padding) styles.push(`padding: ${props.padding}px`);
+  if (props.margin) styles.push(`margin: ${props.margin}px`);
+  if (props.fontSize) styles.push(`font-size: ${props.fontSize}px`);
+  if (props.textAlign) styles.push(`text-align: ${props.textAlign}`);
+  return styles.join('; ');
+}
+
+function generateReactComponent(components: any[]): string {
+  return `import {
+  Body,
+  Container,
+  Head,
+  Html,
+  Preview,
+  Tailwind,
+} 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]">
+            ${renderComponentsToReact(components)}
+          </Container>
+        </Body>
+      </Tailwind>
+    </Html>
+  );
+}
+`;
+}
+
+function renderComponentsToReact(components: any[]): string {
+  return components.map(comp => {
+    switch (comp.type) {
+      case 'text':
+        return `<Text className="${getClassName(comp.props)}">${comp.props.text || ''}</Text>`;
+      case 'heading':
+        return `<Heading className="${getClassName(comp.props)}">${comp.props.text || ''}</Heading>`;
+      case 'button':
+        return `<Button href="${comp.props.href || '#'}" className="${getClassName(comp.props)}">${comp.props.text || 'Button'}</Button>`;
+      case 'image':
+        return `<Img src="${comp.props.src || ''}" alt="${comp.props.alt || ''}" className="${getClassName(comp.props)}" />`;
+      default:
+        return '';
+    }
+  }).join('\n            ');
+}
+
+function getClassName(props: any): string {
+  const classes: string[] = [];
+  if (props.textAlign) classes.push(`text-${props.textAlign}`);
+  if (props.fontSize) classes.push(`text-[${props.fontSize}px]`);
+  return classes.join(' ');
+}
+

package/lib/store.ts

@@ -0,0 +1,198 @@
+import { create } from 'zustand';
+import { EmailComponent, EmailTemplate } from '@/types/email';
+
+interface EmailBuilderState {
+  components: EmailComponent[];
+  selectedComponent: string | null;
+  templates: EmailTemplate[];
+  currentTemplate: EmailTemplate | null;
+  
+  // Actions
+  addComponent: (component: EmailComponent, index?: number, parentId?: string | null) => void;
+  removeComponent: (id: string) => void;
+  updateComponent: (id: string, props: Partial<EmailComponent>) => void;
+  selectComponent: (id: string | null) => void;
+  moveComponent: (fromIndex: number, toIndex: number) => void;
+  clearComponents: () => void;
+  saveTemplate: (name: string) => void;
+  loadTemplate: (template: EmailTemplate) => void;
+  deleteTemplate: (id: string) => void;
+}
+
+const defaultTemplate: EmailTemplate = {
+  id: 'default',
+  name: 'New Template',
+  components: [],
+  createdAt: new Date().toISOString(),
+};
+
+// Helper function to recursively find and update components
+const findAndUpdateComponent = (
+  components: EmailComponent[],
+  id: string,
+  updater: (comp: EmailComponent) => EmailComponent
+): EmailComponent[] => {
+  return components.map((comp) => {
+    if (comp.id === id) {
+      return updater(comp);
+    }
+    if (comp.children) {
+      return {
+        ...comp,
+        children: findAndUpdateComponent(comp.children, id, updater),
+      };
+    }
+    return comp;
+  });
+};
+
+// Helper function to recursively find and remove components
+const findAndRemoveComponent = (
+  components: EmailComponent[],
+  id: string
+): EmailComponent[] => {
+  return components
+    .filter((comp) => comp.id !== id)
+    .map((comp) => {
+      if (comp.children) {
+        return {
+          ...comp,
+          children: findAndRemoveComponent(comp.children, id),
+        };
+      }
+      return comp;
+    });
+};
+
+// Helper function to find a component by ID
+const findComponent = (
+  components: EmailComponent[],
+  id: string
+): EmailComponent | null => {
+  for (const comp of components) {
+    if (comp.id === id) {
+      return comp;
+    }
+    if (comp.children) {
+      const found = findComponent(comp.children, id);
+      if (found) return found;
+    }
+  }
+  return null;
+};
+
+export const useEmailBuilder = create<EmailBuilderState>((set) => ({
+  components: [],
+  selectedComponent: null,
+  templates: [],
+  currentTemplate: null,
+
+  addComponent: (component, index, parentId) =>
+    set((state) => {
+      // Check if component with this ID already exists
+      const componentExists = (comps: EmailComponent[], id: string): boolean => {
+        for (const comp of comps) {
+          if (comp.id === id) return true;
+          if (comp.children && componentExists(comp.children, id)) return true;
+        }
+        return false;
+      };
+
+      if (componentExists(state.components, component.id)) {
+        // Component already exists, don't add again
+        return state;
+      }
+
+      if (parentId) {
+        // Add to nested component
+        const updatedComponents = findAndUpdateComponent(
+          state.components,
+          parentId,
+          (parent) => {
+            const children = parent.children || [];
+            // Check for duplicate in children
+            if (children.some((child) => child.id === component.id)) {
+              return parent;
+            }
+            const newChildren = [...children];
+            if (index !== undefined) {
+              newChildren.splice(index, 0, component);
+            } else {
+              newChildren.push(component);
+            }
+            return { ...parent, children: newChildren };
+          }
+        );
+        return { components: updatedComponents };
+      } else {
+        // Add to root level
+        // Check for duplicate at root level
+        if (state.components.some((c) => c.id === component.id)) {
+          return state;
+        }
+        const newComponents = [...state.components];
+        if (index !== undefined) {
+          newComponents.splice(index, 0, component);
+        } else {
+          newComponents.push(component);
+        }
+        return { components: newComponents };
+      }
+    }),
+
+  removeComponent: (id) =>
+    set((state) => ({
+      components: findAndRemoveComponent(state.components, id),
+      selectedComponent: state.selectedComponent === id ? null : state.selectedComponent,
+    })),
+
+
+  updateComponent: (id, props) =>
+    set((state) => ({
+      components: findAndUpdateComponent(state.components, id, (comp) => ({
+        ...comp,
+        ...props,
+      })),
+    })),
+
+  selectComponent: (id) => set({ selectedComponent: id }),
+
+  moveComponent: (fromIndex, toIndex) =>
+    set((state) => {
+      const newComponents = [...state.components];
+      const [removed] = newComponents.splice(fromIndex, 1);
+      newComponents.splice(toIndex, 0, removed);
+      return { components: newComponents };
+    }),
+
+  clearComponents: () => set({ components: [], selectedComponent: null }),
+
+  saveTemplate: (name) =>
+    set((state) => {
+      const newTemplate: EmailTemplate = {
+        id: Date.now().toString(),
+        name,
+        components: state.components,
+        createdAt: new Date().toISOString(),
+      };
+      return {
+        templates: [...state.templates, newTemplate],
+        currentTemplate: newTemplate,
+      };
+    }),
+
+  loadTemplate: (template) =>
+    set({
+      components: template.components,
+      currentTemplate: template,
+      selectedComponent: null,
+    }),
+
+  deleteTemplate: (id) =>
+    set((state) => ({
+      templates: state.templates.filter((t) => t.id !== id),
+      currentTemplate:
+        state.currentTemplate?.id === id ? null : state.currentTemplate,
+    })),
+}));
+

package/package.json

@@ -0,0 +1,76 @@
+{
+    "name": "email-builder-pro",
+    "version": "1.0.0",
+    "description": "A fully functional drag-and-drop email template builder with React and Next.js",
+    "main": "src/index.tsx",
+    "types": "src/index.tsx",
+    "files": [
+        "src",
+        "components",
+        "lib",
+        "types",
+        "app/globals.css",
+        "tailwind.config.js",
+        "postcss.config.js",
+        "README.md",
+        "INTEGRATION.md",
+        "PUBLISH.md"
+    ],
+    "keywords": [
+        "email",
+        "email-builder",
+        "drag-drop",
+        "react",
+        "nextjs",
+        "template",
+        "email-template",
+        "react-email",
+        "visual-editor"
+    ],
+    "author": "pranaykodam@gmail.com",
+    "license": "MIT",
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/pranay213/email-builder.git"
+    },
+    "private": false,
+    "scripts": {
+        "dev": "next dev",
+        "build": "next build",
+        "start": "next start",
+        "lint": "next lint",
+        "email:dev": "email dev",
+        "email:export": "email export",
+        "prepublishOnly": "npm run build",
+        "publish:package": "bash scripts/publish.sh",
+        "publish": "npm publish --access public"
+    },
+    "dependencies": {
+        "@react-email/components": "^1.0.2",
+        "next": "^14.0.0",
+        "react": "^18.2.0",
+        "react-dom": "^18.2.0",
+        "react-dnd": "^16.0.1",
+        "react-dnd-html5-backend": "^16.0.1",
+        "lucide-react": "^0.294.0",
+        "zustand": "^4.4.7"
+    },
+    "peerDependencies": {
+        "react": "^18.2.0",
+        "react-dom": "^18.2.0",
+        "next": "^14.0.0"
+    },
+    "devDependencies": {
+        "@react-email/preview-server": "^5.1.0",
+        "@types/node": "^20.10.0",
+        "@types/react": "^18.2.0",
+        "@types/react-dom": "^18.2.0",
+        "react-email": "^5.1.0",
+        "typescript": "^5.3.0",
+        "tailwindcss": "^3.4.0",
+        "postcss": "^8.4.32",
+        "autoprefixer": "^10.4.16",
+        "eslint": "^8.55.0",
+        "eslint-config-next": "^14.0.0"
+    }
+}

package/postcss.config.js

@@ -0,0 +1,8 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};
+
+

package/src/index.tsx

@@ -0,0 +1,42 @@
+// Main entry point for the email-builder package
+// This file exports all public APIs
+
+'use client';
+
+import { DndProvider } from 'react-dnd';
+import { HTML5Backend } from 'react-dnd-html5-backend';
+import EmailBuilderComponent from '../components/EmailBuilder';
+
+export interface EmailBuilderProps {
+  className?: string;
+}
+
+// Default export - Main EmailBuilder component
+export default function EmailBuilder(props?: EmailBuilderProps) {
+  return (
+    <DndProvider backend={HTML5Backend}>
+      <div className={props?.className}>
+        <EmailBuilderComponent />
+      </div>
+    </DndProvider>
+  );
+}
+
+// Named exports for advanced usage
+export { default as EmailBuilderCore } from '../components/EmailBuilder';
+export { default as Canvas } from '../components/Canvas';
+export { default as ComponentPalette } from '../components/ComponentPalette';
+export { default as PropertiesPanel } from '../components/PropertiesPanel';
+export { default as PreviewPanel } from '../components/PreviewPanel';
+export { default as Toolbar } from '../components/Toolbar';
+export { default as TemplateManager } from '../components/TemplateManager';
+export { default as ComponentRenderer } from '../components/ComponentRenderer';
+export { default as ImageUpload } from '../components/ImageUpload';
+export { default as NumberInput } from '../components/NumberInput';
+
+// Export types
+export * from '../types/email';
+
+// Export store hook
+export { useEmailBuilder } from '../lib/store';
+