@startsimpli/ui 0.4.5 → 0.4.7

package/src/components/email-editor/blocks/divider-block.tsx

@@ -0,0 +1,43 @@
+'use client'
+
+import { DividerBlock as DividerBlockType } from '../types'
+
+interface DividerBlockProps {
+  block: DividerBlockType
+  onChange: (block: DividerBlockType) => void
+  isEditing?: boolean
+}
+
+export function DividerBlockEditor({ block, onChange, isEditing = true }: DividerBlockProps) {
+  const color = block.color || '#d1d5db'
+  const thickness = block.thickness || 1
+  const width = block.width || 100
+
+  if (!isEditing) {
+    if (block.dividerStyle === 'space') {
+      return <div style={{ height: 32 }} />
+    }
+    return (
+      <div className="my-4" style={{ textAlign: 'center' }}>
+        <hr
+          style={{
+            display: 'inline-block',
+            width: `${width}%`,
+            border: 'none',
+            borderTop: `${thickness}px ${block.dividerStyle} ${color}`,
+            margin: 0,
+          }}
+        />
+      </div>
+    )
+  }
+
+  return (
+    <div className="p-4 space-y-3">
+      {/* Preview */}
+      <div className="py-2">
+        <DividerBlockEditor block={block} onChange={onChange} isEditing={false} />
+      </div>
+    </div>
+  )
+}

package/src/components/email-editor/blocks/footer-block.tsx

@@ -0,0 +1,39 @@
+'use client'
+
+import { FooterBlock as FooterBlockType } from '../types'
+
+interface FooterBlockProps {
+  block: FooterBlockType
+  onChange: (block: FooterBlockType) => void
+  isEditing?: boolean
+}
+
+export function FooterBlockEditor({ block, onChange, isEditing = true }: FooterBlockProps) {
+  const alignClass =
+    block.alignment === 'left'
+      ? 'text-left'
+      : block.alignment === 'right'
+        ? 'text-right'
+        : 'text-center'
+
+  return (
+    <div className={`py-4 ${alignClass}`}>
+      <div className="text-xs text-gray-500 space-y-1">
+        <p>{block.companyName}</p>
+        {block.address && <p>{block.address}</p>}
+        {block.showUnsubscribe && (
+          <p className="mt-2">
+            <a
+              href={block.unsubscribeUrl || '#'}
+              className="text-gray-500 underline"
+              onClick={isEditing ? (e) => e.preventDefault() : undefined}
+            >
+              Unsubscribe
+            </a>
+            {' '}from these emails
+          </p>
+        )}
+      </div>
+    </div>
+  )
+}

package/src/components/email-editor/blocks/header-block.tsx

@@ -0,0 +1,39 @@
+'use client'
+
+import { HeaderBlock as HeaderBlockType } from '../types'
+import { Building2 } from 'lucide-react'
+
+interface HeaderBlockProps {
+  block: HeaderBlockType
+  onChange: (block: HeaderBlockType) => void
+  isEditing?: boolean
+}
+
+export function HeaderBlockEditor({ block, onChange, isEditing = true }: HeaderBlockProps) {
+  const alignClass =
+    block.alignment === 'left'
+      ? 'text-left'
+      : block.alignment === 'right'
+        ? 'text-right'
+        : 'text-center'
+
+  return (
+    <div className={`py-4 ${alignClass}`}>
+      <div className="inline-flex items-center gap-3">
+        {block.logoUrl ? (
+          // eslint-disable-next-line @next/next/no-img-element
+          <img
+            src={block.logoUrl}
+            alt={block.companyName}
+            className="h-10 w-auto"
+          />
+        ) : (
+          <div className="h-10 w-10 rounded bg-gray-100 flex items-center justify-center">
+            <Building2 className="h-5 w-5 text-gray-400" />
+          </div>
+        )}
+        <span className="text-xl font-semibold">{block.companyName}</span>
+      </div>
+    </div>
+  )
+}

package/src/components/email-editor/blocks/image-block.tsx

@@ -0,0 +1,61 @@
+'use client'
+
+import { ImageBlock as ImageBlockType } from '../types'
+import { ImageIcon } from 'lucide-react'
+
+interface ImageBlockProps {
+  block: ImageBlockType
+  onChange: (block: ImageBlockType) => void
+  isEditing?: boolean
+}
+
+export function ImageBlockEditor({ block, onChange, isEditing = true }: ImageBlockProps) {
+  const alignClass =
+    block.alignment === 'left'
+      ? 'text-left'
+      : block.alignment === 'right'
+        ? 'text-right'
+        : 'text-center'
+
+  const widthPct = block.width || 100
+
+  if (!block.url) {
+    return (
+      <div className={`py-4 ${alignClass}`}>
+        <div
+          className="inline-flex flex-col items-center justify-center bg-gray-100 rounded-lg p-8"
+          style={{ width: `${widthPct}%`, maxWidth: '100%' }}
+        >
+          <ImageIcon className="h-12 w-12 text-gray-400" />
+          <p className="text-sm text-gray-500 mt-2">
+            {isEditing ? 'Click to set image URL' : 'No image set'}
+          </p>
+        </div>
+      </div>
+    )
+  }
+
+  const imgElement = (
+    // eslint-disable-next-line @next/next/no-img-element
+    <img
+      src={block.url}
+      alt={block.alt || 'Email image'}
+      style={{ width: `${widthPct}%`, maxWidth: '100%', borderRadius: 4 }}
+    />
+  )
+
+  return (
+    <div className={`py-2 ${alignClass}`}>
+      {block.linkUrl && !isEditing ? (
+        <a href={block.linkUrl} target="_blank" rel="noopener noreferrer">
+          {imgElement}
+        </a>
+      ) : (
+        imgElement
+      )}
+      {block.caption && (
+        <p className="text-sm text-gray-500 mt-1">{block.caption}</p>
+      )}
+    </div>
+  )
+}

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

@@ -0,0 +1,9 @@
+export { TextBlockEditor } from './text-block'
+export { MetricsBlockEditor } from './metrics-block'
+export { DividerBlockEditor } from './divider-block'
+export { ButtonBlockEditor } from './button-block'
+export { ImageBlockEditor } from './image-block'
+export { SpacerBlockEditor } from './spacer-block'
+export { SocialBlockEditor } from './social-block'
+export { HeaderBlockEditor } from './header-block'
+export { FooterBlockEditor } from './footer-block'

package/src/components/email-editor/blocks/metrics-block.tsx

@@ -0,0 +1,198 @@
+'use client'
+
+import { MetricsBlock as MetricsBlockType, MetricItem } from '../types'
+import { Button } from '../../ui/button'
+import { Input } from '../../ui/input'
+import { Label } from '../../ui/label'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '../../ui/select'
+import { Plus, Trash2, TrendingUp, TrendingDown, Minus } from 'lucide-react'
+import { cn } from '../../../lib/utils'
+
+interface MetricsBlockProps {
+  block: MetricsBlockType
+  onChange: (block: MetricsBlockType) => void
+  isEditing?: boolean
+}
+
+export function MetricsBlockEditor({ block, onChange, isEditing = true }: MetricsBlockProps) {
+  const updateMetric = (metricId: string, updates: Partial<MetricItem>) => {
+    onChange({
+      ...block,
+      metrics: block.metrics.map((m) =>
+        m.id === metricId ? { ...m, ...updates } : m
+      ),
+    })
+  }
+
+  const addMetric = () => {
+    const newMetric: MetricItem = {
+      id: `metric-${Date.now()}`,
+      label: 'New Metric',
+      value: '0',
+      change: '+0%',
+      changeType: 'neutral',
+    }
+    onChange({ ...block, metrics: [...block.metrics, newMetric] })
+  }
+
+  const removeMetric = (metricId: string) => {
+    onChange({ ...block, metrics: block.metrics.filter((m) => m.id !== metricId) })
+  }
+
+  const getChangeColor = (type?: 'positive' | 'negative' | 'neutral') => {
+    switch (type) {
+      case 'positive':
+        return 'text-green-600'
+      case 'negative':
+        return 'text-red-600'
+      default:
+        return 'text-gray-500'
+    }
+  }
+
+  const getChangeIcon = (type?: 'positive' | 'negative' | 'neutral') => {
+    switch (type) {
+      case 'positive':
+        return <TrendingUp className="h-3 w-3 text-green-600" />
+      case 'negative':
+        return <TrendingDown className="h-3 w-3 text-red-600" />
+      default:
+        return <Minus className="h-3 w-3 text-gray-400" />
+    }
+  }
+
+  if (!isEditing) {
+    return (
+      <div className="py-4">
+        {block.title && (
+          <h3 className="text-lg font-semibold mb-4 text-center">{block.title}</h3>
+        )}
+        <div
+          className={cn(
+            'grid gap-4',
+            block.columns === 2 && 'grid-cols-2',
+            block.columns === 3 && 'grid-cols-3',
+            block.columns === 4 && 'grid-cols-4'
+          )}
+        >
+          {block.metrics.map((metric) => (
+            <div key={metric.id} className="text-center p-4 bg-gray-50 rounded-lg">
+              <div className="text-2xl font-bold">{metric.value}</div>
+              <div className="text-sm text-muted-foreground">{metric.label}</div>
+              {metric.change && (
+                <div
+                  className={cn(
+                    'flex items-center justify-center gap-1 text-sm mt-1',
+                    getChangeColor(metric.changeType)
+                  )}
+                >
+                  {getChangeIcon(metric.changeType)}
+                  {metric.change}
+                </div>
+              )}
+            </div>
+          ))}
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div className="space-y-4 p-4">
+      <div className="grid grid-cols-2 gap-4">
+        <div className="space-y-2">
+          <Label className="text-xs">Section Title</Label>
+          <Input
+            value={block.title || ''}
+            onChange={(e) => onChange({ ...block, title: e.target.value })}
+            placeholder="Key Metrics"
+          />
+        </div>
+        <div className="space-y-2">
+          <Label className="text-xs">Columns</Label>
+          <Select
+            value={block.columns.toString()}
+            onValueChange={(v) =>
+              onChange({ ...block, columns: parseInt(v) as 2 | 3 | 4 })
+            }
+          >
+            <SelectTrigger>
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="2">2 columns</SelectItem>
+              <SelectItem value="3">3 columns</SelectItem>
+              <SelectItem value="4">4 columns</SelectItem>
+            </SelectContent>
+          </Select>
+        </div>
+      </div>
+
+      <div className="space-y-2">
+        {block.metrics.map((metric) => (
+          <div
+            key={metric.id}
+            className="flex items-start gap-2 p-2 border rounded bg-background"
+          >
+            <div className="flex-1 grid grid-cols-4 gap-2">
+              <Input
+                value={metric.label}
+                onChange={(e) => updateMetric(metric.id, { label: e.target.value })}
+                placeholder="Label"
+                className="text-xs"
+              />
+              <Input
+                value={metric.value}
+                onChange={(e) => updateMetric(metric.id, { value: e.target.value })}
+                placeholder="Value"
+                className="text-xs"
+              />
+              <Input
+                value={metric.change || ''}
+                onChange={(e) => updateMetric(metric.id, { change: e.target.value })}
+                placeholder="+15%"
+                className="text-xs"
+              />
+              <Select
+                value={metric.changeType || 'neutral'}
+                onValueChange={(v) =>
+                  updateMetric(metric.id, {
+                    changeType: v as 'positive' | 'negative' | 'neutral',
+                  })
+                }
+              >
+                <SelectTrigger className="text-xs">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="positive">Positive</SelectItem>
+                  <SelectItem value="negative">Negative</SelectItem>
+                  <SelectItem value="neutral">Neutral</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+            <Button
+              variant="ghost"
+              size="icon"
+              className="h-8 w-8"
+              onClick={() => removeMetric(metric.id)}
+              disabled={block.metrics.length <= 1}
+            >
+              <Trash2 className="h-3 w-3 text-muted-foreground" />
+            </Button>
+          </div>
+        ))}
+        <Button variant="outline" size="sm" onClick={addMetric} className="w-full">
+          <Plus className="mr-2 h-3 w-3" />
+          Add Metric
+        </Button>
+      </div>
+    </div>
+  )
+}

package/src/components/email-editor/blocks/social-block.tsx

@@ -0,0 +1,75 @@
+'use client'
+
+import * as React from 'react'
+import { SocialBlock as SocialBlockType, SocialLink } from '../types'
+import { Linkedin, Twitter, Facebook, Instagram, Youtube, Github, Globe } from 'lucide-react'
+
+interface SocialBlockProps {
+  block: SocialBlockType
+  onChange: (block: SocialBlockType) => void
+  isEditing?: boolean
+}
+
+const PLATFORM_ICONS: Record<SocialLink['platform'], React.ComponentType<{ className?: string; style?: React.CSSProperties }>> = {
+  linkedin: Linkedin,
+  twitter: Twitter,
+  facebook: Facebook,
+  instagram: Instagram,
+  youtube: Youtube,
+  github: Github,
+  website: Globe,
+}
+
+const PLATFORM_COLORS: Record<SocialLink['platform'], string> = {
+  linkedin: '#0A66C2',
+  twitter: '#1DA1F2',
+  facebook: '#1877F2',
+  instagram: '#E4405F',
+  youtube: '#FF0000',
+  github: '#333333',
+  website: '#6b7280',
+}
+
+export function SocialBlockEditor({ block, onChange, isEditing = true }: SocialBlockProps) {
+  const iconSize = block.iconSize || 24
+  const alignClass =
+    block.alignment === 'left'
+      ? 'justify-start'
+      : block.alignment === 'right'
+        ? 'justify-end'
+        : 'justify-center'
+
+  return (
+    <div className={`flex gap-3 py-3 ${alignClass}`}>
+      {block.links.map((link) => {
+        const Icon = PLATFORM_ICONS[link.platform]
+        const color = PLATFORM_COLORS[link.platform]
+        if (isEditing || !link.url) {
+          return (
+            <span
+              key={link.id}
+              className="inline-flex items-center justify-center rounded"
+              style={{ width: iconSize + 8, height: iconSize + 8 }}
+            >
+              <Icon style={{ width: iconSize, height: iconSize, color }} />
+            </span>
+          )
+        }
+        return (
+          <a
+            key={link.id}
+            href={link.url}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="inline-flex items-center justify-center rounded"
+            style={{ width: iconSize + 8, height: iconSize + 8 }}
+          >
+            <Icon style={{ width: iconSize, height: iconSize, color }} />
+          </a>
+        )
+      })}
+    </div>
+  )
+}
+
+export { PLATFORM_ICONS, PLATFORM_COLORS }

package/src/components/email-editor/blocks/spacer-block.tsx

@@ -0,0 +1,26 @@
+'use client'
+
+import { SpacerBlock as SpacerBlockType } from '../types'
+
+interface SpacerBlockProps {
+  block: SpacerBlockType
+  onChange: (block: SpacerBlockType) => void
+  isEditing?: boolean
+}
+
+export function SpacerBlockEditor({ block, onChange, isEditing = true }: SpacerBlockProps) {
+  const height = block.height || 32
+
+  if (!isEditing) {
+    return <div style={{ height }} />
+  }
+
+  return (
+    <div
+      className="relative border border-dashed border-gray-300 rounded flex items-center justify-center"
+      style={{ height }}
+    >
+      <span className="text-xs text-gray-400">{height}px</span>
+    </div>
+  )
+}

package/src/components/email-editor/blocks/text-block.tsx

@@ -0,0 +1,75 @@
+'use client'
+
+import * as React from 'react'
+import { TextBlock as TextBlockType } from '../types'
+
+interface TextBlockProps {
+  block: TextBlockType
+  onChange: (block: TextBlockType) => void
+  isEditing?: boolean
+  /** Optional custom rich text editor component. Receives content, onChange, placeholder, and className. */
+  renderEditor?: (props: {
+    content: string
+    onChange: (html: string) => void
+    placeholder?: string
+    className?: string
+  }) => React.ReactNode
+}
+
+export function TextBlockEditor({ block, onChange, isEditing = true, renderEditor }: TextBlockProps) {
+  if (!isEditing) {
+    return (
+      <div
+        className="prose prose-sm max-w-none py-2"
+        style={{
+          fontSize: block.fontSize ? `${block.fontSize}px` : undefined,
+          fontFamily: block.fontFamily || undefined,
+          lineHeight: block.lineHeight || undefined,
+          color: block.textColor || undefined,
+        }}
+        dangerouslySetInnerHTML={{ __html: block.content || '<p></p>' }}
+      />
+    )
+  }
+
+  // If a custom editor is provided, use it
+  if (renderEditor) {
+    return (
+      <div
+        style={{
+          fontSize: block.fontSize ? `${block.fontSize}px` : undefined,
+          fontFamily: block.fontFamily || undefined,
+          lineHeight: block.lineHeight || undefined,
+          color: block.textColor || undefined,
+        }}
+      >
+        {renderEditor({
+          content: block.content,
+          onChange: (html) => onChange({ ...block, content: html }),
+          placeholder: 'Write your content...',
+          className: 'min-h-[60px] border-0',
+        })}
+      </div>
+    )
+  }
+
+  // Default fallback: simple contentEditable div
+  return (
+    <div
+      style={{
+        fontSize: block.fontSize ? `${block.fontSize}px` : undefined,
+        fontFamily: block.fontFamily || undefined,
+        lineHeight: block.lineHeight || undefined,
+        color: block.textColor || undefined,
+      }}
+    >
+      <div
+        contentEditable
+        suppressContentEditableWarning
+        className="min-h-[60px] outline-none prose prose-sm max-w-none py-2"
+        dangerouslySetInnerHTML={{ __html: block.content || '' }}
+        onBlur={(e) => onChange({ ...block, content: e.currentTarget.innerHTML })}
+      />
+    </div>
+  )
+}