449 lines
18 KiB
TypeScript
449 lines
18 KiB
TypeScript
import { useEffect, useMemo, useRef, useState } from 'react'
|
||
import { get, set } from 'idb-keyval'
|
||
import { api, apiBlob } from './api'
|
||
import type { Block, BlockType, TemplateDocument, TemplateRecord, TemplateSummary, TemplateType } from './types'
|
||
|
||
type Screen = 'templates' | 'editor' | 'preview' | 'data'
|
||
type SaveState = 'saved' | 'saving' | 'offline'
|
||
|
||
type Props = {
|
||
user: {
|
||
name?: string
|
||
preferred_username?: string
|
||
email?: string
|
||
}
|
||
}
|
||
|
||
const defaults: Record<BlockType, Record<string, unknown>> = {
|
||
heading: { text: 'New heading' },
|
||
text: { text: 'Write something useful.' },
|
||
kpi: { label: 'Metric', value: '{{summary.total}}' },
|
||
button: { text: 'Open link', url: 'https://example.com' },
|
||
image: { url: 'https://placehold.co/800x360', alt: 'Image' },
|
||
divider: {},
|
||
table: {
|
||
rowsPath: 'items',
|
||
columns: [
|
||
{ label: 'Name', key: 'name' },
|
||
{ label: 'Value', key: 'value' }
|
||
]
|
||
}
|
||
}
|
||
|
||
const blockLabels: Record<BlockType, string> = {
|
||
heading: 'Heading',
|
||
text: 'Text',
|
||
kpi: 'KPI',
|
||
button: 'Button',
|
||
image: 'Image',
|
||
divider: 'Divider',
|
||
table: 'Table'
|
||
}
|
||
|
||
function flatten(value: unknown, prefix = ''): string[] {
|
||
if (!value || typeof value !== 'object' || Array.isArray(value)) return prefix ? [prefix] : []
|
||
const out: string[] = []
|
||
for (const [key, child] of Object.entries(value as Record<string, unknown>)) {
|
||
const path = prefix ? `${prefix}.${key}` : key
|
||
if (child && typeof child === 'object' && !Array.isArray(child)) out.push(...flatten(child, path))
|
||
else out.push(path)
|
||
}
|
||
return out
|
||
}
|
||
|
||
function blockSummary(block: Block) {
|
||
if (block.type === 'divider') return 'Divider'
|
||
if (block.type === 'table') return `Rows: ${String(block.props.rowsPath || 'items')}`
|
||
if (block.type === 'kpi') return `${String(block.props.label || 'Metric')} · ${String(block.props.value || '')}`
|
||
return String(block.props.text || block.props.alt || blockLabels[block.type])
|
||
}
|
||
|
||
export function App({ user }: Props) {
|
||
const [screen, setScreen] = useState<Screen>('templates')
|
||
const [templates, setTemplates] = useState<TemplateSummary[]>([])
|
||
const [active, setActive] = useState<TemplateRecord | null>(null)
|
||
const [templateDoc, setTemplateDoc] = useState<TemplateDocument>({ blocks: [] })
|
||
const [sampleData, setSampleData] = useState<Record<string, unknown>>({})
|
||
const [selectedId, setSelectedId] = useState<string | null>(null)
|
||
const [addOpen, setAddOpen] = useState(false)
|
||
const [createOpen, setCreateOpen] = useState(false)
|
||
const [createName, setCreateName] = useState('')
|
||
const [createType, setCreateType] = useState<TemplateType>('report')
|
||
const [saveState, setSaveState] = useState<SaveState>('saved')
|
||
const [previewHtml, setPreviewHtml] = useState('')
|
||
const [previewDevice, setPreviewDevice] = useState<'mobile' | 'desktop'>('mobile')
|
||
const [dataText, setDataText] = useState('{}')
|
||
const [error, setError] = useState('')
|
||
const loadedId = useRef<string | null>(null)
|
||
const timer = useRef<number | undefined>(undefined)
|
||
|
||
const selected = templateDoc.blocks.find(block => block.id === selectedId) || null
|
||
const paths = useMemo(() => flatten(sampleData), [sampleData])
|
||
|
||
async function refreshTemplates() {
|
||
setTemplates(await api<TemplateSummary[]>('/api/templates'))
|
||
}
|
||
|
||
useEffect(() => {
|
||
void refreshTemplates().catch(err => setError(String(err)))
|
||
}, [])
|
||
|
||
async function saveNow() {
|
||
if (!active) return
|
||
await api(`/api/templates/${active.id}/draft`, {
|
||
method: 'PUT',
|
||
body: JSON.stringify({ document: templateDoc, sampleData })
|
||
})
|
||
}
|
||
|
||
useEffect(() => {
|
||
if (!active || loadedId.current !== active.id) return
|
||
window.clearTimeout(timer.current)
|
||
setSaveState('saving')
|
||
void set(`template-studio:${active.id}`, { document: templateDoc, sampleData, savedAt: Date.now() })
|
||
|
||
timer.current = window.setTimeout(async () => {
|
||
try {
|
||
await saveNow()
|
||
setSaveState('saved')
|
||
} catch {
|
||
setSaveState('offline')
|
||
}
|
||
}, 700)
|
||
|
||
return () => window.clearTimeout(timer.current)
|
||
}, [templateDoc, sampleData, active?.id])
|
||
|
||
async function openTemplate(id: string) {
|
||
setError('')
|
||
const remote = await api<TemplateRecord>(`/api/templates/${id}`)
|
||
const local = await get<{ document: TemplateDocument; sampleData: Record<string, unknown> }>(
|
||
`template-studio:${id}`
|
||
)
|
||
loadedId.current = id
|
||
setActive(remote)
|
||
setTemplateDoc(local?.document || remote.draft_document)
|
||
setSampleData(local?.sampleData || remote.sample_data || {})
|
||
setDataText(JSON.stringify(local?.sampleData || remote.sample_data || {}, null, 2))
|
||
setSelectedId(null)
|
||
setScreen('editor')
|
||
}
|
||
|
||
async function createTemplate() {
|
||
if (!createName.trim()) return
|
||
const created = await api<TemplateRecord>('/api/templates', {
|
||
method: 'POST',
|
||
body: JSON.stringify({ name: createName.trim(), type: createType })
|
||
})
|
||
setCreateOpen(false)
|
||
setCreateName('')
|
||
await refreshTemplates()
|
||
await openTemplate(created.id)
|
||
}
|
||
|
||
function addBlock(type: BlockType) {
|
||
const block: Block = { id: crypto.randomUUID(), type, props: structuredClone(defaults[type]) }
|
||
setTemplateDoc(current => ({ ...current, blocks: [...current.blocks, block] }))
|
||
setAddOpen(false)
|
||
setSelectedId(block.id)
|
||
}
|
||
|
||
function updateBlock(id: string, patch: Record<string, unknown>) {
|
||
setTemplateDoc(current => ({
|
||
...current,
|
||
blocks: current.blocks.map(block =>
|
||
block.id === id ? { ...block, props: { ...block.props, ...patch } } : block
|
||
)
|
||
}))
|
||
}
|
||
|
||
function moveBlock(id: string, direction: -1 | 1) {
|
||
setTemplateDoc(current => {
|
||
const blocks = [...current.blocks]
|
||
const index = blocks.findIndex(block => block.id === id)
|
||
const target = index + direction
|
||
if (index < 0 || target < 0 || target >= blocks.length) return current
|
||
;[blocks[index], blocks[target]] = [blocks[target], blocks[index]]
|
||
return { ...current, blocks }
|
||
})
|
||
}
|
||
|
||
function removeBlock(id: string) {
|
||
setTemplateDoc(current => ({ ...current, blocks: current.blocks.filter(block => block.id !== id) }))
|
||
setSelectedId(null)
|
||
}
|
||
|
||
async function publish() {
|
||
if (!active) return
|
||
await saveNow()
|
||
const updated = await api<TemplateRecord>(`/api/templates/${active.id}/publish`, { method: 'POST' })
|
||
setActive(updated)
|
||
setSaveState('saved')
|
||
await refreshTemplates()
|
||
}
|
||
|
||
async function refreshPreview() {
|
||
if (!active) return
|
||
await saveNow()
|
||
const format = active.type === 'email' ? 'email' : 'html'
|
||
const result = await api<{ html: string }>(`/api/templates/${active.id}/render`, {
|
||
method: 'POST',
|
||
body: JSON.stringify({ format, data: sampleData })
|
||
})
|
||
setPreviewHtml(result.html)
|
||
}
|
||
|
||
async function goPreview() {
|
||
setScreen('preview')
|
||
try {
|
||
await refreshPreview()
|
||
} catch (err) {
|
||
setError(String(err))
|
||
}
|
||
}
|
||
|
||
async function downloadPdf() {
|
||
if (!active) return
|
||
await saveNow()
|
||
const blob = await apiBlob(`/api/templates/${active.id}/render`, {
|
||
method: 'POST',
|
||
body: JSON.stringify({ format: 'pdf', data: sampleData })
|
||
})
|
||
const href = URL.createObjectURL(blob)
|
||
const link = window.document.createElement('a')
|
||
link.href = href
|
||
link.download = `${active.name.replace(/[^a-z0-9]+/gi, '-').toLowerCase() || 'report'}.pdf`
|
||
link.click()
|
||
URL.revokeObjectURL(href)
|
||
}
|
||
|
||
function applyData() {
|
||
try {
|
||
const parsed = JSON.parse(dataText)
|
||
setSampleData(parsed)
|
||
setError('')
|
||
} catch {
|
||
setError('Sample data must be valid JSON.')
|
||
}
|
||
}
|
||
|
||
function bindingField(block: Block) {
|
||
if (block.type === 'kpi') return 'value'
|
||
if (block.type === 'image') return 'alt'
|
||
if (block.type === 'table' || block.type === 'divider') return null
|
||
return 'text'
|
||
}
|
||
|
||
function insertBinding(path: string) {
|
||
if (!selected) return
|
||
const field = bindingField(selected)
|
||
if (!field) return
|
||
updateBlock(selected.id, { [field]: `${String(selected.props[field] || '')}{{${path}}}` })
|
||
}
|
||
|
||
if (screen === 'templates') {
|
||
return (
|
||
<main className="app">
|
||
<header className="topbar landing">
|
||
<div>
|
||
<div className="eyebrow">ARROWSTACK</div>
|
||
<h1>Template Studio</h1>
|
||
</div>
|
||
<button className="circle primary" onClick={() => setCreateOpen(true)} aria-label="New template">＋</button>
|
||
</header>
|
||
|
||
<section className="intro">
|
||
<p>Build email templates and reports from reusable blocks, right from your phone.</p>
|
||
</section>
|
||
|
||
{error && <div className="error-banner">{error}</div>}
|
||
|
||
<section className="template-list">
|
||
{templates.map(template => (
|
||
<button key={template.id} className="template-card" onClick={() => void openTemplate(template.id)}>
|
||
<span className={`type-badge ${template.type}`}>{template.type === 'email' ? 'Email' : 'Report'}</span>
|
||
<strong>{template.name}</strong>
|
||
<span className="muted">
|
||
{template.published_version ? `Published v${template.published_version}` : 'Draft'} · {new Date(template.updated_at).toLocaleDateString()}
|
||
</span>
|
||
</button>
|
||
))}
|
||
{!templates.length && <div className="empty">No templates yet. Tap + to build your first one.</div>}
|
||
</section>
|
||
|
||
<footer className="account-row">
|
||
<span>{user.name || user.preferred_username || user.email}</span>
|
||
<a href="/auth/logout">Sign out</a>
|
||
</footer>
|
||
|
||
{createOpen && (
|
||
<div className="sheet-backdrop" onClick={() => setCreateOpen(false)}>
|
||
<section className="sheet compact" onClick={event => event.stopPropagation()}>
|
||
<div className="grabber" />
|
||
<h2>New template</h2>
|
||
<label>
|
||
Name
|
||
<input autoFocus value={createName} onChange={event => setCreateName(event.target.value)} placeholder="Weekly packing report" />
|
||
</label>
|
||
<div className="segmented">
|
||
<button className={createType === 'report' ? 'active' : ''} onClick={() => setCreateType('report')}>Report</button>
|
||
<button className={createType === 'email' ? 'active' : ''} onClick={() => setCreateType('email')}>Email</button>
|
||
</div>
|
||
<button className="button primary full" onClick={() => void createTemplate()}>Create template</button>
|
||
</section>
|
||
</div>
|
||
)}
|
||
</main>
|
||
)
|
||
}
|
||
|
||
return (
|
||
<main className="app editor-shell">
|
||
<header className="topbar editor-topbar">
|
||
<button className="circle" onClick={() => { setScreen('templates'); void refreshTemplates() }}>←</button>
|
||
<div className="title-stack">
|
||
<strong>{active?.name}</strong>
|
||
<span className={`save-state ${saveState}`}>
|
||
{saveState === 'saved' ? 'Saved' : saveState === 'saving' ? 'Saving…' : 'Saved locally'}
|
||
</span>
|
||
</div>
|
||
<button className="publish-button" onClick={() => void publish()}>
|
||
{active?.published_version ? `Publish v${active.published_version + 1}` : 'Publish'}
|
||
</button>
|
||
</header>
|
||
|
||
{error && <div className="error-banner inline">{error}</div>}
|
||
|
||
{screen === 'editor' && (
|
||
<section className="canvas">
|
||
<div className="canvas-label">{active?.type === 'email' ? 'EMAIL' : 'REPORT'}</div>
|
||
{templateDoc.blocks.map((block, index) => (
|
||
<button key={block.id} className={`block-card ${selectedId === block.id ? 'selected' : ''}`} onClick={() => setSelectedId(block.id)}>
|
||
<span className="block-type">{blockLabels[block.type]}</span>
|
||
<strong>{blockSummary(block)}</strong>
|
||
<span className="block-index">{index + 1}</span>
|
||
</button>
|
||
))}
|
||
<button className="add-block" onClick={() => setAddOpen(true)}>＋ Add block</button>
|
||
{!templateDoc.blocks.length && <p className="muted center">Start by adding a block.</p>}
|
||
</section>
|
||
)}
|
||
|
||
{screen === 'preview' && (
|
||
<section className="preview-panel">
|
||
<div className="preview-toolbar">
|
||
<div className="segmented small">
|
||
<button className={previewDevice === 'mobile' ? 'active' : ''} onClick={() => setPreviewDevice('mobile')}>Mobile</button>
|
||
<button className={previewDevice === 'desktop' ? 'active' : ''} onClick={() => setPreviewDevice('desktop')}>Desktop</button>
|
||
</div>
|
||
<button className="button" onClick={() => void refreshPreview()}>Refresh</button>
|
||
</div>
|
||
<div className={`preview-frame-wrap ${previewDevice}`}>
|
||
{previewHtml ? <iframe title="Template preview" srcDoc={previewHtml} sandbox="" /> : <div className="empty">Generating preview…</div>}
|
||
</div>
|
||
{active?.type === 'report' && <button className="button primary full" onClick={() => void downloadPdf()}>Download PDF</button>}
|
||
</section>
|
||
)}
|
||
|
||
{screen === 'data' && (
|
||
<section className="data-panel">
|
||
<h2>Sample data</h2>
|
||
<p className="muted">Use this while designing. Production callers can supply their own render data.</p>
|
||
<textarea className="json-editor" value={dataText} onChange={event => setDataText(event.target.value)} spellCheck={false} />
|
||
<button className="button primary full" onClick={applyData}>Apply sample data</button>
|
||
{!!paths.length && (
|
||
<>
|
||
<h3>Available fields</h3>
|
||
<div className="binding-list">
|
||
{paths.map(path => <code key={path}>{`{{${path}}}`}</code>)}
|
||
</div>
|
||
</>
|
||
)}
|
||
</section>
|
||
)}
|
||
|
||
<nav className="bottom-nav">
|
||
<button className={screen === 'editor' ? 'active' : ''} onClick={() => setScreen('editor')}><span>✎</span>Edit</button>
|
||
<button className={screen === 'preview' ? 'active' : ''} onClick={() => void goPreview()}><span>◉</span>Preview</button>
|
||
<button className={screen === 'data' ? 'active' : ''} onClick={() => setScreen('data')}><span>{'{ }'}</span>Data</button>
|
||
</nav>
|
||
|
||
{addOpen && (
|
||
<div className="sheet-backdrop" onClick={() => setAddOpen(false)}>
|
||
<section className="sheet" onClick={event => event.stopPropagation()}>
|
||
<div className="grabber" />
|
||
<h2>Add block</h2>
|
||
<div className="block-picker">
|
||
{(Object.keys(blockLabels) as BlockType[]).map(type => (
|
||
<button key={type} onClick={() => addBlock(type)}>
|
||
<span className="picker-icon">{type === 'heading' ? 'H' : type === 'text' ? 'T' : type === 'kpi' ? '#' : type === 'button' ? '↗' : type === 'image' ? '▧' : type === 'divider' ? '—' : '▦'}</span>
|
||
{blockLabels[type]}
|
||
</button>
|
||
))}
|
||
</div>
|
||
</section>
|
||
</div>
|
||
)}
|
||
|
||
{selected && screen === 'editor' && (
|
||
<div className="sheet-backdrop light" onClick={() => setSelectedId(null)}>
|
||
<section className="sheet block-editor" onClick={event => event.stopPropagation()}>
|
||
<div className="grabber" />
|
||
<div className="sheet-title-row">
|
||
<h2>{blockLabels[selected.type]}</h2>
|
||
<button className="text-button" onClick={() => setSelectedId(null)}>Done</button>
|
||
</div>
|
||
|
||
{(selected.type === 'heading' || selected.type === 'text') && (
|
||
<label>
|
||
Text
|
||
<textarea value={String(selected.props.text || '')} onChange={event => updateBlock(selected.id, { text: event.target.value })} />
|
||
</label>
|
||
)}
|
||
|
||
{selected.type === 'kpi' && (
|
||
<>
|
||
<label>Label<input value={String(selected.props.label || '')} onChange={event => updateBlock(selected.id, { label: event.target.value })} /></label>
|
||
<label>Value<input value={String(selected.props.value || '')} onChange={event => updateBlock(selected.id, { value: event.target.value })} /></label>
|
||
</>
|
||
)}
|
||
|
||
{selected.type === 'button' && (
|
||
<>
|
||
<label>Text<input value={String(selected.props.text || '')} onChange={event => updateBlock(selected.id, { text: event.target.value })} /></label>
|
||
<label>URL<input value={String(selected.props.url || '')} onChange={event => updateBlock(selected.id, { url: event.target.value })} /></label>
|
||
</>
|
||
)}
|
||
|
||
{selected.type === 'image' && (
|
||
<>
|
||
<label>Image URL<input value={String(selected.props.url || '')} onChange={event => updateBlock(selected.id, { url: event.target.value })} /></label>
|
||
<label>Alt text<input value={String(selected.props.alt || '')} onChange={event => updateBlock(selected.id, { alt: event.target.value })} /></label>
|
||
</>
|
||
)}
|
||
|
||
{selected.type === 'table' && (
|
||
<label>Rows data path<input value={String(selected.props.rowsPath || '')} onChange={event => updateBlock(selected.id, { rowsPath: event.target.value })} placeholder="items" /></label>
|
||
)}
|
||
|
||
{bindingField(selected) && !!paths.length && (
|
||
<>
|
||
<h3>Insert data</h3>
|
||
<div className="binding-chips">
|
||
{paths.slice(0, 12).map(path => <button key={path} onClick={() => insertBinding(path)}>{path}</button>)}
|
||
</div>
|
||
</>
|
||
)}
|
||
|
||
<div className="block-actions">
|
||
<button onClick={() => moveBlock(selected.id, -1)}>↑ Move up</button>
|
||
<button onClick={() => moveBlock(selected.id, 1)}>↓ Move down</button>
|
||
</div>
|
||
<button className="danger-link" onClick={() => removeBlock(selected.id)}>Delete block</button>
|
||
</section>
|
||
</div>
|
||
)}
|
||
</main>
|
||
)
|
||
}
|