@startsimpli/ui 0.4.5 → 0.4.7

package/src/components/email-editor/index.ts

@@ -0,0 +1,50 @@
+// Email Editor - barrel export
+export { EmailEditor } from './email-editor'
+
+// Types
+export type {
+  Block,
+  BlockType,
+  TextBlock,
+  MetricsBlock,
+  MetricItem,
+  DividerBlock,
+  CTABlock,
+  ImageBlock,
+  SpacerBlock,
+  SocialBlock,
+  SocialLink,
+  HeaderBlock,
+  FooterBlock,
+  Section,
+  Row,
+  ColumnLayout,
+  GlobalStyles,
+  BlockStyle,
+  MergeFieldDefinition,
+  EditorSelection,
+} from './types'
+
+// Helpers
+export {
+  createBlock,
+  createRow,
+  createSection,
+  getColumnCount,
+  getColumnWidths,
+  DEFAULT_GLOBAL_STYLES,
+  // Serialization
+  serializeSections,
+  deserializeSections,
+  serializeBlocks,
+  deserializeBlocks,
+  // Migration
+  migrateFromLegacy,
+  flattenToLegacy,
+} from './types'
+
+// Renderer
+export { renderToEmailHtml, renderToPreviewHtml } from './renderer/email-html-renderer'
+
+// Utilities
+export { createInvestorUpdateTemplate, createEmptyTemplate, THEME_PRESETS } from './utils/defaults'

package/src/components/email-editor/renderer/block-renderers.ts

@@ -0,0 +1,209 @@
+import {
+  Block,
+  TextBlock,
+  MetricsBlock,
+  DividerBlock,
+  CTABlock,
+  ImageBlock,
+  SpacerBlock,
+  SocialBlock,
+  HeaderBlock,
+  FooterBlock,
+  GlobalStyles,
+} from '../types'
+
+// Render a single block to email-safe HTML (table-based, inline CSS)
+export function renderBlockToHtml(block: Block, globalStyles: GlobalStyles): string {
+  switch (block.type) {
+    case 'text':
+      return renderTextBlock(block, globalStyles)
+    case 'metrics':
+      return renderMetricsBlock(block)
+    case 'divider':
+      return renderDividerBlock(block)
+    case 'cta':
+      return renderButtonBlock(block)
+    case 'image':
+      return renderImageBlock(block)
+    case 'spacer':
+      return renderSpacerBlock(block)
+    case 'social':
+      return renderSocialBlock(block)
+    case 'header':
+      return renderHeaderBlock(block)
+    case 'footer':
+      return renderFooterBlock(block)
+    default:
+      return ''
+  }
+}
+
+function blockPaddingStyle(block: Block): string {
+  const s = block.style
+  if (!s) return ''
+  const parts: string[] = []
+  if (s.paddingTop) parts.push(`padding-top:${s.paddingTop}px`)
+  if (s.paddingBottom) parts.push(`padding-bottom:${s.paddingBottom}px`)
+  if (s.paddingLeft) parts.push(`padding-left:${s.paddingLeft}px`)
+  if (s.paddingRight) parts.push(`padding-right:${s.paddingRight}px`)
+  if (s.marginTop) parts.push(`margin-top:${s.marginTop}px`)
+  if (s.marginBottom) parts.push(`margin-bottom:${s.marginBottom}px`)
+  if (s.backgroundColor) parts.push(`background-color:${s.backgroundColor}`)
+  return parts.join(';')
+}
+
+function renderTextBlock(block: TextBlock, globalStyles: GlobalStyles): string {
+  const fontFamily = block.fontFamily || globalStyles.fontFamily
+  const fontSize = block.fontSize ? `${block.fontSize}px` : '16px'
+  const lineHeight = block.lineHeight ? `${block.lineHeight}` : '1.6'
+  const color = block.textColor || '#1f2937'
+  const extraStyle = blockPaddingStyle(block)
+
+  return `<div style="font-family:${fontFamily};font-size:${fontSize};line-height:${lineHeight};color:${color};${extraStyle}">${block.content}</div>`
+}
+
+function renderMetricsBlock(block: MetricsBlock): string {
+  const cols = block.columns || 2
+  const extraStyle = blockPaddingStyle(block)
+
+  const title = block.title
+    ? `<div style="text-align:center;margin-bottom:16px;font-size:18px;font-weight:600;${extraStyle}">${block.title}</div>`
+    : ''
+
+  const cells = block.metrics
+    .map((m) => {
+      const changeColor =
+        m.changeType === 'positive'
+          ? '#16a34a'
+          : m.changeType === 'negative'
+            ? '#dc2626'
+            : '#6b7280'
+      const changeHtml = m.change
+        ? `<div style="font-size:12px;color:${changeColor};margin-top:4px;">${m.change}</div>`
+        : ''
+      return `<td style="text-align:center;padding:16px;background:#f9fafb;border-radius:8px;width:${Math.floor(100 / cols)}%;">
+        <div style="font-size:24px;font-weight:bold;">${m.value}</div>
+        <div style="font-size:14px;color:#6b7280;margin-top:4px;">${m.label}</div>
+        ${changeHtml}
+      </td>`
+    })
+    .join('<td style="width:16px;"></td>')
+
+  return `${title}<table width="100%" cellpadding="0" cellspacing="0" style="border-collapse:collapse;margin:16px 0;"><tr>${cells}</tr></table>`
+}
+
+function renderDividerBlock(block: DividerBlock): string {
+  const extraStyle = blockPaddingStyle(block)
+  if (block.dividerStyle === 'space') {
+    return `<div style="height:32px;${extraStyle}"></div>`
+  }
+  const color = block.color || '#d1d5db'
+  const thickness = block.thickness || 1
+  const width = block.width || 100
+  return `<table width="100%" cellpadding="0" cellspacing="0" style="margin:16px 0;${extraStyle}"><tr><td align="center"><div style="width:${width}%;border-top:${thickness}px ${block.dividerStyle} ${color};"></div></td></tr></table>`
+}
+
+function renderButtonBlock(block: CTABlock): string {
+  const bg = block.buttonColor || '#2563eb'
+  const color = block.textColor || '#ffffff'
+  const radius = block.borderRadius ?? 6
+  const paddingH = block.paddingH ?? 24
+  const paddingV = block.paddingV ?? 12
+  const extraStyle = blockPaddingStyle(block)
+
+  const align = block.alignment || 'center'
+  return `<table width="100%" cellpadding="0" cellspacing="0" style="margin:16px 0;${extraStyle}"><tr><td align="${align}">
+    <!--[if mso]><v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" href="${block.url || '#'}" style="height:${paddingV * 2 + 20}px;v-text-anchor:middle;width:auto;" arcsize="${Math.round((radius / (paddingV * 2 + 20)) * 100)}%" strokecolor="${bg}" fillcolor="${bg}"><center style="color:${color};font-family:sans-serif;font-size:14px;font-weight:500;">${block.text}</center></v:roundrect><![endif]-->
+    <!--[if !mso]><!-->
+    <a href="${block.url || '#'}" style="display:inline-block;padding:${paddingV}px ${paddingH}px;background-color:${bg};color:${color};border-radius:${radius}px;text-decoration:none;font-weight:500;font-size:14px;font-family:sans-serif;">${block.text}</a>
+    <!--<![endif]-->
+  </td></tr></table>`
+}
+
+function renderImageBlock(block: ImageBlock): string {
+  if (!block.url) return ''
+  const width = block.width || 100
+  const align = block.alignment || 'center'
+  const extraStyle = blockPaddingStyle(block)
+  const captionHtml = block.caption
+    ? `<div style="font-size:14px;color:#6b7280;margin-top:8px;text-align:center;">${block.caption}</div>`
+    : ''
+
+  const imgTag = `<img src="${block.url}" alt="${block.alt || ''}" width="${Math.round(600 * (width / 100))}" style="display:block;max-width:100%;height:auto;border-radius:4px;" />`
+  const linked = block.linkUrl
+    ? `<a href="${block.linkUrl}" target="_blank">${imgTag}</a>`
+    : imgTag
+
+  return `<table width="100%" cellpadding="0" cellspacing="0" style="margin:8px 0;${extraStyle}"><tr><td align="${align}">${linked}${captionHtml}</td></tr></table>`
+}
+
+function renderSpacerBlock(block: SpacerBlock): string {
+  const height = block.height || 32
+  return `<div style="height:${height}px;line-height:${height}px;font-size:1px;">&nbsp;</div>`
+}
+
+function renderSocialBlock(block: SocialBlock): string {
+  const align = block.alignment || 'center'
+  const size = block.iconSize || 24
+  const extraStyle = blockPaddingStyle(block)
+
+  // Using text-based fallback icons for email compatibility
+  const platformLabels: Record<string, string> = {
+    linkedin: 'LinkedIn',
+    twitter: 'Twitter',
+    facebook: 'Facebook',
+    instagram: 'Instagram',
+    youtube: 'YouTube',
+    github: 'GitHub',
+    website: 'Website',
+  }
+  const platformColors: Record<string, string> = {
+    linkedin: '#0A66C2',
+    twitter: '#1DA1F2',
+    facebook: '#1877F2',
+    instagram: '#E4405F',
+    youtube: '#FF0000',
+    github: '#333333',
+    website: '#6b7280',
+  }
+
+  const links = block.links
+    .filter((l) => l.url)
+    .map((l) => {
+      const label = platformLabels[l.platform] || l.platform
+      const color = platformColors[l.platform] || '#6b7280'
+      return `<td style="padding:0 6px;"><a href="${l.url}" target="_blank" style="color:${color};text-decoration:none;font-size:${Math.max(12, size - 8)}px;font-weight:500;">${label}</a></td>`
+    })
+    .join('')
+
+  if (!links) return ''
+  return `<table width="100%" cellpadding="0" cellspacing="0" style="margin:16px 0;${extraStyle}"><tr><td align="${align}"><table cellpadding="0" cellspacing="0"><tr>${links}</tr></table></td></tr></table>`
+}
+
+function renderHeaderBlock(block: HeaderBlock): string {
+  const align = block.alignment || 'center'
+  const extraStyle = blockPaddingStyle(block)
+  const logo = block.logoUrl
+    ? `<img src="${block.logoUrl}" alt="${block.companyName}" style="height:40px;width:auto;margin-right:12px;vertical-align:middle;" />`
+    : ''
+  return `<table width="100%" cellpadding="0" cellspacing="0" style="margin:8px 0;${extraStyle}"><tr><td align="${align}" style="padding:16px 0;">
+    ${logo}<span style="font-size:20px;font-weight:600;vertical-align:middle;">${block.companyName}</span>
+  </td></tr></table>`
+}
+
+function renderFooterBlock(block: FooterBlock): string {
+  const align = block.alignment || 'center'
+  const extraStyle = blockPaddingStyle(block)
+  const addressHtml = block.address
+    ? `<div style="margin-top:4px;">${block.address}</div>`
+    : ''
+  const unsubHtml = block.showUnsubscribe
+    ? `<div style="margin-top:8px;"><a href="${block.unsubscribeUrl || '#'}" style="color:#6b7280;text-decoration:underline;">Unsubscribe</a> from these emails</div>`
+    : ''
+
+  return `<table width="100%" cellpadding="0" cellspacing="0" style="margin:8px 0;${extraStyle}"><tr><td align="${align}" style="font-size:12px;color:#6b7280;padding:16px 0;">
+    <div>${block.companyName}</div>
+    ${addressHtml}
+    ${unsubHtml}
+  </td></tr></table>`
+}

package/src/components/email-editor/renderer/email-html-renderer.ts

@@ -0,0 +1,128 @@
+import { Section, GlobalStyles, DEFAULT_GLOBAL_STYLES, getColumnWidths } from '../types'
+import { renderBlockToHtml } from './block-renderers'
+
+export interface RenderOptions {
+  subject?: string
+  preheaderText?: string
+}
+
+/**
+ * Converts sections to a full email-safe HTML document.
+ * Uses table-based layout with inline CSS for maximum email client compatibility.
+ */
+export function renderToEmailHtml(
+  sections: Section[],
+  globalStyles: GlobalStyles = DEFAULT_GLOBAL_STYLES,
+  options: RenderOptions = {}
+): string {
+  const { subject = '', preheaderText = '' } = options
+  const contentWidth = globalStyles.contentWidth || 600
+  const bgColor = globalStyles.backgroundColor || '#f3f4f6'
+  const fontFamily = globalStyles.fontFamily || '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif'
+
+  const sectionsHtml = sections.map((section) => renderSection(section, globalStyles, contentWidth)).join('')
+
+  const preheader = preheaderText
+    ? `<div style="display:none;font-size:1px;color:${bgColor};line-height:1px;max-height:0;max-width:0;opacity:0;overflow:hidden;">${preheaderText}</div>`
+    : ''
+
+  return `<!DOCTYPE html>
+<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="x-apple-disable-message-reformatting">
+  <title>${subject}</title>
+  <!--[if mso]>
+  <noscript>
+    <xml>
+      <o:OfficeDocumentSettings>
+        <o:AllowPNG/>
+        <o:PixelsPerInch>96</o:PixelsPerInch>
+      </o:OfficeDocumentSettings>
+    </xml>
+  </noscript>
+  <![endif]-->
+  <style type="text/css">
+    body { margin:0; padding:0; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; }
+    table, td { border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; }
+    img { -ms-interpolation-mode:bicubic; border:0; height:auto; line-height:100%; outline:none; text-decoration:none; }
+    a { color:inherit; }
+    @media only screen and (max-width:620px) {
+      .email-container { width:100% !important; max-width:100% !important; }
+      .stack-column { display:block !important; width:100% !important; max-width:100% !important; }
+      .stack-column-center { text-align:center !important; }
+    }
+  </style>
+</head>
+<body style="margin:0;padding:0;background-color:${bgColor};font-family:${fontFamily};-webkit-font-smoothing:antialiased;">
+  ${preheader}
+  <!-- Email wrapper table -->
+  <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="background-color:${bgColor};">
+    <tr>
+      <td align="center" style="padding:24px 16px;">
+        <!-- Content container -->
+        <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="${contentWidth}" class="email-container" style="max-width:${contentWidth}px;width:100%;">
+          ${sectionsHtml}
+        </table>
+      </td>
+    </tr>
+  </table>
+</body>
+</html>`
+}
+
+function renderSection(section: Section, globalStyles: GlobalStyles, contentWidth: number): string {
+  const bgColor = section.backgroundColor || '#ffffff'
+  const pt = section.paddingTop ?? 16
+  const pb = section.paddingBottom ?? 16
+  const pl = section.paddingLeft ?? 0
+  const pr = section.paddingRight ?? 0
+
+  const rowsHtml = section.rows.map((row) => {
+    const widths = getColumnWidths(row.layout)
+    const colCount = widths.length
+
+    if (colCount === 1) {
+      // Single column: simple
+      const blocksHtml = row.columns[0]
+        ?.map((block) => renderBlockToHtml(block, globalStyles))
+        .join('') || ''
+      return `<tr><td style="padding:0;">${blocksHtml}</td></tr>`
+    }
+
+    // Multi-column: use nested table
+    const columnsHtml = widths
+      .map((widthPct, i) => {
+        const colBlocks = row.columns[i] || []
+        const blocksHtml = colBlocks
+          .map((block) => renderBlockToHtml(block, globalStyles))
+          .join('')
+        const pxWidth = Math.round((contentWidth - pl - pr) * (widthPct / 100))
+        return `<td class="stack-column" valign="top" width="${pxWidth}" style="width:${widthPct}%;padding:0 4px;vertical-align:top;">${blocksHtml}</td>`
+      })
+      .join('')
+
+    return `<tr><td style="padding:0;">
+      <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%"><tr>${columnsHtml}</tr></table>
+    </td></tr>`
+  }).join('')
+
+  return `<tr><td style="background-color:${bgColor};padding:${pt}px ${pr}px ${pb}px ${pl}px;border-radius:8px;">
+    <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
+      ${rowsHtml}
+    </table>
+  </td></tr>
+  <tr><td style="height:4px;font-size:1px;line-height:1px;">&nbsp;</td></tr>`
+}
+
+/**
+ * Render sections to a simple HTML string (for preview iframe, not for sending).
+ */
+export function renderToPreviewHtml(
+  sections: Section[],
+  globalStyles: GlobalStyles = DEFAULT_GLOBAL_STYLES
+): string {
+  return renderToEmailHtml(sections, globalStyles)
+}