npm - @startsimpli/ui - Versions diffs - 0.4.6 → 0.4.8 - Mend

@startsimpli/ui 0.4.6 → 0.4.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (122) hide show

package/src/components/email-editor/__tests__/email-html-renderer.test.ts ADDED Viewed

@@ -0,0 +1,376 @@
+import { renderToEmailHtml, renderToPreviewHtml } from '../renderer/email-html-renderer'
+import type { Section, GlobalStyles } from '../types'
+import { DEFAULT_GLOBAL_STYLES, createSection, createRow } from '../types'
+// ---------------------------------------------------------------------------
+// Fixtures
+// ---------------------------------------------------------------------------
+function makeSingleSection(overrides: Partial<Section> = {}): Section[] {
+  const section: Section = {
+    id: 'section-1',
+    rows: [
+      {
+        id: 'row-1',
+        layout: '1',
+        columns: [
+          [
+            {
+              id: 'text-1',
+              type: 'text',
+              content: '<p>Hello email</p>',
+            },
+          ],
+        ],
+      },
+    ],
+    paddingTop: 16,
+    paddingBottom: 16,
+    paddingLeft: 0,
+    paddingRight: 0,
+    ...overrides,
+  }
+  return [section]
+}
+const defaultStyles: GlobalStyles = DEFAULT_GLOBAL_STYLES
+// ---------------------------------------------------------------------------
+// Valid HTML document structure
+// ---------------------------------------------------------------------------
+describe('renderToEmailHtml — document structure', () => {
+  it('starts with <!DOCTYPE html>', () => {
+    const html = renderToEmailHtml(makeSingleSection(), defaultStyles)
+    expect(html.trimStart()).toMatch(/^<!DOCTYPE html>/i)
+  })
+  it('contains <html> root element with lang="en"', () => {
+    const html = renderToEmailHtml(makeSingleSection(), defaultStyles)
+    expect(html).toContain('<html lang="en"')
+  })
+  it('contains <head> with charset meta tag', () => {
+    const html = renderToEmailHtml(makeSingleSection(), defaultStyles)
+    expect(html).toContain('<meta charset="utf-8">')
+  })
+  it('contains viewport meta tag', () => {
+    const html = renderToEmailHtml(makeSingleSection(), defaultStyles)
+    expect(html).toContain('name="viewport"')
+  })
+  it('contains <body> element', () => {
+    const html = renderToEmailHtml(makeSingleSection(), defaultStyles)
+    expect(html).toContain('<body')
+  })
+  it('closes </html> tag', () => {
+    const html = renderToEmailHtml(makeSingleSection(), defaultStyles)
+    expect(html.trimEnd()).toMatch(/<\/html>$/)
+  })
+  it('contains closing </body> tag', () => {
+    const html = renderToEmailHtml(makeSingleSection(), defaultStyles)
+    expect(html).toContain('</body>')
+  })
+  it('contains role="presentation" table for email wrapper', () => {
+    const html = renderToEmailHtml(makeSingleSection(), defaultStyles)
+    expect(html).toContain('role="presentation"')
+  })
+  it('contains email-container class for responsive width', () => {
+    const html = renderToEmailHtml(makeSingleSection(), defaultStyles)
+    expect(html).toContain('class="email-container"')
+  })
+  it('contains @media query for max-width:620px', () => {
+    const html = renderToEmailHtml(makeSingleSection(), defaultStyles)
+    expect(html).toContain('max-width:620px')
+  })
+  it('contains MSO conditional comment for Outlook', () => {
+    const html = renderToEmailHtml(makeSingleSection(), defaultStyles)
+    expect(html).toContain('[if mso]')
+  })
+})
+// ---------------------------------------------------------------------------
+// Global styles applied to output
+// ---------------------------------------------------------------------------
+describe('renderToEmailHtml — global styles', () => {
+  it('uses globalStyles.backgroundColor in body inline style', () => {
+    const html = renderToEmailHtml(makeSingleSection(), { ...defaultStyles, backgroundColor: '#abcdef' })
+    expect(html).toContain('background-color:#abcdef')
+  })
+  it('uses globalStyles.contentWidth for container width attribute', () => {
+    const html = renderToEmailHtml(makeSingleSection(), { ...defaultStyles, contentWidth: 700 })
+    expect(html).toContain('width="700"')
+    expect(html).toContain('max-width:700px')
+  })
+  it('uses globalStyles.fontFamily in body inline style', () => {
+    const html = renderToEmailHtml(makeSingleSection(), {
+      ...defaultStyles,
+      fontFamily: 'Georgia, serif',
+    })
+    expect(html).toContain('font-family:Georgia, serif')
+  })
+  it('defaults contentWidth to 600 when not provided', () => {
+    const html = renderToEmailHtml(makeSingleSection(), { ...defaultStyles, contentWidth: 0 })
+    expect(html).toContain('width="600"')
+  })
+  it('defaults backgroundColor when not provided', () => {
+    const html = renderToEmailHtml(makeSingleSection(), { ...defaultStyles, backgroundColor: '' })
+    // Falls back to the empty string default; body still renders
+    expect(html).toContain('<body')
+  })
+})
+// ---------------------------------------------------------------------------
+// Subject / preheader options
+// ---------------------------------------------------------------------------
+describe('renderToEmailHtml — options', () => {
+  it('puts subject in <title> tag', () => {
+    const html = renderToEmailHtml(makeSingleSection(), defaultStyles, { subject: 'Q1 Update' })
+    expect(html).toContain('<title>Q1 Update</title>')
+  })
+  it('empty subject results in empty <title>', () => {
+    const html = renderToEmailHtml(makeSingleSection(), defaultStyles, { subject: '' })
+    expect(html).toContain('<title></title>')
+  })
+  it('renders preheader div when preheaderText is provided', () => {
+    const html = renderToEmailHtml(makeSingleSection(), defaultStyles, {
+      preheaderText: 'Read this important update',
+    })
+    expect(html).toContain('Read this important update')
+    expect(html).toContain('display:none')
+  })
+  it('does not render preheader div when preheaderText is absent', () => {
+    const html = renderToEmailHtml(makeSingleSection(), defaultStyles)
+    expect(html).not.toContain('display:none')
+  })
+})
+// ---------------------------------------------------------------------------
+// Block content included in output
+// ---------------------------------------------------------------------------
+describe('renderToEmailHtml — block content', () => {
+  it('includes text block content in output', () => {
+    const html = renderToEmailHtml(makeSingleSection(), defaultStyles)
+    expect(html).toContain('Hello email')
+  })
+  it('includes content from header block', () => {
+    const section: Section = {
+      id: 's1',
+      rows: [
+        {
+          id: 'r1',
+          layout: '1',
+          columns: [
+            [{ id: 'h1', type: 'header', companyName: 'StartSimpli', alignment: 'center' }],
+          ],
+        },
+      ],
+    }
+    const html = renderToEmailHtml([section], defaultStyles)
+    expect(html).toContain('StartSimpli')
+  })
+  it('includes metrics block values', () => {
+    const section: Section = {
+      id: 's1',
+      rows: [
+        {
+          id: 'r1',
+          layout: '1',
+          columns: [
+            [
+              {
+                id: 'met1',
+                type: 'metrics',
+                title: 'My Metrics',
+                metrics: [{ id: 'm1', label: 'Revenue', value: '$42k', changeType: 'positive' }],
+                columns: 2,
+              },
+            ],
+          ],
+        },
+      ],
+    }
+    const html = renderToEmailHtml([section], defaultStyles)
+    expect(html).toContain('$42k')
+    expect(html).toContain('Revenue')
+  })
+  it('includes CTA button text and URL', () => {
+    const section: Section = {
+      id: 's1',
+      rows: [
+        {
+          id: 'r1',
+          layout: '1',
+          columns: [
+            [
+              {
+                id: 'cta1',
+                type: 'cta',
+                text: 'Click Here',
+                url: 'https://start.simpli',
+                alignment: 'center',
+                buttonColor: '#2563eb',
+                textColor: '#ffffff',
+                borderRadius: 6,
+                paddingH: 24,
+                paddingV: 12,
+              },
+            ],
+          ],
+        },
+      ],
+    }
+    const html = renderToEmailHtml([section], defaultStyles)
+    expect(html).toContain('Click Here')
+    expect(html).toContain('https://start.simpli')
+  })
+  it('includes footer company name', () => {
+    const section: Section = {
+      id: 's1',
+      rows: [
+        {
+          id: 'r1',
+          layout: '1',
+          columns: [
+            [
+              {
+                id: 'f1',
+                type: 'footer',
+                companyName: 'Acme Inc',
+                showUnsubscribe: false,
+                alignment: 'center',
+              },
+            ],
+          ],
+        },
+      ],
+    }
+    const html = renderToEmailHtml([section], defaultStyles)
+    expect(html).toContain('Acme Inc')
+  })
+})
+// ---------------------------------------------------------------------------
+// Multi-section and multi-column layout
+// ---------------------------------------------------------------------------
+describe('renderToEmailHtml — layout', () => {
+  it('renders multiple sections (both section backgrounds appear)', () => {
+    const s1: Section = {
+      id: 's1',
+      backgroundColor: '#ff0000',
+      rows: [{ id: 'r1', layout: '1', columns: [[{ id: 't1', type: 'text', content: 'Sec1' }]] }],
+    }
+    const s2: Section = {
+      id: 's2',
+      backgroundColor: '#00ff00',
+      rows: [{ id: 'r2', layout: '1', columns: [[{ id: 't2', type: 'text', content: 'Sec2' }]] }],
+    }
+    const html = renderToEmailHtml([s1, s2], defaultStyles)
+    expect(html).toContain('#ff0000')
+    expect(html).toContain('#00ff00')
+    expect(html).toContain('Sec1')
+    expect(html).toContain('Sec2')
+  })
+  it('renders multi-column row using nested table with stack-column class', () => {
+    const section: Section = {
+      id: 's1',
+      rows: [
+        {
+          id: 'r1',
+          layout: '2',
+          columns: [
+            [{ id: 't1', type: 'text', content: 'Left col' }],
+            [{ id: 't2', type: 'text', content: 'Right col' }],
+          ],
+        },
+      ],
+    }
+    const html = renderToEmailHtml([section], defaultStyles)
+    expect(html).toContain('class="stack-column"')
+    expect(html).toContain('Left col')
+    expect(html).toContain('Right col')
+  })
+  it('section separator spacer row is present between sections', () => {
+    const s1: Section = {
+      id: 's1',
+      rows: [{ id: 'r1', layout: '1', columns: [[{ id: 't1', type: 'text', content: 'A' }]] }],
+    }
+    const s2: Section = {
+      id: 's2',
+      rows: [{ id: 'r2', layout: '1', columns: [[{ id: 't2', type: 'text', content: 'B' }]] }],
+    }
+    const html = renderToEmailHtml([s1, s2], defaultStyles)
+    // 4px spacer row between sections
+    expect(html).toContain('height:4px')
+  })
+  it('section padding is applied in style attribute', () => {
+    const section: Section = {
+      id: 's1',
+      paddingTop: 32,
+      paddingBottom: 24,
+      paddingLeft: 8,
+      paddingRight: 8,
+      rows: [{ id: 'r1', layout: '1', columns: [[{ id: 't1', type: 'text', content: 'X' }]] }],
+    }
+    const html = renderToEmailHtml([section], defaultStyles)
+    expect(html).toContain('padding:32px 8px 24px 8px')
+  })
+  it('renders empty sections array without crashing', () => {
+    expect(() => renderToEmailHtml([], defaultStyles)).not.toThrow()
+    const html = renderToEmailHtml([], defaultStyles)
+    expect(html).toContain('<!DOCTYPE html>')
+  })
+  it('renders section with empty columns without crashing', () => {
+    const section: Section = {
+      id: 's1',
+      rows: [{ id: 'r1', layout: '1', columns: [[]] }],
+    }
+    expect(() => renderToEmailHtml([section], defaultStyles)).not.toThrow()
+  })
+})
+// ---------------------------------------------------------------------------
+// renderToPreviewHtml delegates to renderToEmailHtml
+// ---------------------------------------------------------------------------
+describe('renderToPreviewHtml', () => {
+  it('returns the same output as renderToEmailHtml', () => {
+    const sections = makeSingleSection()
+    expect(renderToPreviewHtml(sections, defaultStyles)).toBe(
+      renderToEmailHtml(sections, defaultStyles)
+    )
+  })
+  it('uses DEFAULT_GLOBAL_STYLES when no styles argument provided', () => {
+    const sections = makeSingleSection()
+    const html = renderToPreviewHtml(sections)
+    expect(html).toContain(`background-color:${DEFAULT_GLOBAL_STYLES.backgroundColor}`)
+  })
+})

package/src/components/email-editor/add-block-menu.tsx ADDED Viewed

@@ -0,0 +1,151 @@
+'use client'
+import * as React from 'react'
+import { BlockType } from './types'
+import { Button } from '../ui/button'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '../ui/dropdown-menu'
+import {
+  Plus,
+  Type,
+  BarChart3,
+  Minus,
+  MousePointerClick,
+  ImageIcon,
+  ArrowUpDown,
+  Share2,
+  Building2,
+  FileText,
+} from 'lucide-react'
+interface BlockOption {
+  type: BlockType
+  label: string
+  icon: React.ReactNode
+  description: string
+  category: 'content' | 'layout' | 'preset'
+}
+const BLOCK_OPTIONS: BlockOption[] = [
+  // Content blocks
+  { type: 'text', label: 'Text', icon: <Type className="h-4 w-4" />, description: 'Rich text content', category: 'content' },
+  { type: 'image', label: 'Image', icon: <ImageIcon className="h-4 w-4" />, description: 'Image with caption', category: 'content' },
+  { type: 'cta', label: 'Button', icon: <MousePointerClick className="h-4 w-4" />, description: 'Call to action button', category: 'content' },
+  { type: 'metrics', label: 'Metrics', icon: <BarChart3 className="h-4 w-4" />, description: 'KPI grid', category: 'content' },
+  // Layout blocks
+  { type: 'divider', label: 'Divider', icon: <Minus className="h-4 w-4" />, description: 'Visual separator', category: 'layout' },
+  { type: 'spacer', label: 'Spacer', icon: <ArrowUpDown className="h-4 w-4" />, description: 'Vertical spacing', category: 'layout' },
+  // Preset blocks
+  { type: 'header', label: 'Header', icon: <Building2 className="h-4 w-4" />, description: 'Logo + company name', category: 'preset' },
+  { type: 'footer', label: 'Footer', icon: <FileText className="h-4 w-4" />, description: 'Unsubscribe + address', category: 'preset' },
+  { type: 'social', label: 'Social Links', icon: <Share2 className="h-4 w-4" />, description: 'Social media icons', category: 'preset' },
+]
+interface AddBlockMenuProps {
+  onAdd: (type: BlockType) => void
+  variant?: 'default' | 'small' | 'inline'
+}
+export function AddBlockMenu({ onAdd, variant = 'default' }: AddBlockMenuProps) {
+  const contentBlocks = BLOCK_OPTIONS.filter((b) => b.category === 'content')
+  const layoutBlocks = BLOCK_OPTIONS.filter((b) => b.category === 'layout')
+  const presetBlocks = BLOCK_OPTIONS.filter((b) => b.category === 'preset')
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        {variant === 'small' ? (
+          <Button
+            variant="outline"
+            size="icon"
+            className="h-6 w-6 rounded-full border-dashed"
+          >
+            <Plus className="h-3 w-3" />
+          </Button>
+        ) : variant === 'inline' ? (
+          <Button
+            variant="ghost"
+            size="sm"
+            className="h-8 gap-1 text-muted-foreground hover:text-foreground"
+          >
+            <Plus className="h-3 w-3" />
+            <span className="text-xs">Add block</span>
+          </Button>
+        ) : (
+          <Button variant="outline" size="sm" className="gap-2">
+            <Plus className="h-4 w-4" />
+            Add Block
+          </Button>
+        )}
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="center" className="w-56">
+        <DropdownMenuLabel className="text-xs text-muted-foreground">
+          Content
+        </DropdownMenuLabel>
+        {contentBlocks.map((option) => (
+          <DropdownMenuItem
+            key={option.type}
+            onClick={() => onAdd(option.type)}
+            className="flex items-center gap-3"
+          >
+            {option.icon}
+            <div>
+              <div className="text-sm font-medium">{option.label}</div>
+              <div className="text-xs text-muted-foreground">
+                {option.description}
+              </div>
+            </div>
+          </DropdownMenuItem>
+        ))}
+        <DropdownMenuSeparator />
+        <DropdownMenuLabel className="text-xs text-muted-foreground">
+          Layout
+        </DropdownMenuLabel>
+        {layoutBlocks.map((option) => (
+          <DropdownMenuItem
+            key={option.type}
+            onClick={() => onAdd(option.type)}
+            className="flex items-center gap-3"
+          >
+            {option.icon}
+            <div>
+              <div className="text-sm font-medium">{option.label}</div>
+              <div className="text-xs text-muted-foreground">
+                {option.description}
+              </div>
+            </div>
+          </DropdownMenuItem>
+        ))}
+        <DropdownMenuSeparator />
+        <DropdownMenuLabel className="text-xs text-muted-foreground">
+          Presets
+        </DropdownMenuLabel>
+        {presetBlocks.map((option) => (
+          <DropdownMenuItem
+            key={option.type}
+            onClick={() => onAdd(option.type)}
+            className="flex items-center gap-3"
+          >
+            {option.icon}
+            <div>
+              <div className="text-sm font-medium">{option.label}</div>
+              <div className="text-xs text-muted-foreground">
+                {option.description}
+              </div>
+            </div>
+          </DropdownMenuItem>
+        ))}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}

package/src/components/email-editor/block-toolbar.tsx ADDED Viewed

@@ -0,0 +1,73 @@
+'use client'
+import { Button } from '../ui/button'
+import {
+  Trash2,
+  Copy,
+  ChevronUp,
+  ChevronDown,
+} from 'lucide-react'
+interface BlockToolbarProps {
+  onDelete: () => void
+  onDuplicate: () => void
+  onMoveUp: () => void
+  onMoveDown: () => void
+  canMoveUp: boolean
+  canMoveDown: boolean
+}
+export function BlockToolbar({
+  onDelete,
+  onDuplicate,
+  onMoveUp,
+  onMoveDown,
+  canMoveUp,
+  canMoveDown,
+}: BlockToolbarProps) {
+  return (
+    <div className="absolute right-1 top-1 flex items-center gap-0.5 z-20">
+      <div className="bg-background border rounded-md shadow-sm p-0.5 flex items-center gap-0.5">
+        <Button
+          variant="ghost"
+          size="icon"
+          className="h-6 w-6"
+          onClick={onMoveUp}
+          disabled={!canMoveUp}
+          title="Move up"
+        >
+          <ChevronUp className="h-3.5 w-3.5" />
+        </Button>
+        <Button
+          variant="ghost"
+          size="icon"
+          className="h-6 w-6"
+          onClick={onMoveDown}
+          disabled={!canMoveDown}
+          title="Move down"
+        >
+          <ChevronDown className="h-3.5 w-3.5" />
+        </Button>
+        <div className="w-px h-4 bg-border" />
+        <Button
+          variant="ghost"
+          size="icon"
+          className="h-6 w-6"
+          onClick={onDuplicate}
+          title="Duplicate"
+        >
+          <Copy className="h-3.5 w-3.5" />
+        </Button>
+        <Button
+          variant="ghost"
+          size="icon"
+          className="h-6 w-6 text-destructive hover:text-destructive"
+          onClick={onDelete}
+          title="Delete"
+        >
+          <Trash2 className="h-3.5 w-3.5" />
+        </Button>
+      </div>
+    </div>
+  )
+}