shadowdao
53c40f856f
Five of six items from user feedback (Contact Form email delivery split into a focused, live-tested follow-up): - Social Links: add Spotify + Twitch (FA 4.7.0 already ships both glyphs). - Features Grid: per-feature icon/image toggle (upload + URL) and an optional button (text + url); render, settings, and HTML export updated, backward compatible with existing icon-only features. - Header: seed the default header with a Navbar (logo + Home/About/Services/ Contact) so new sites open with an editable menu-with-links instead of an empty header zone. Adds a vitest guard that the seed deserializes and exports a real <nav>. - Canvas: slim the empty header/footer placeholder from a padded band to a thin hint line so an empty zone no longer reads as a stray spacer. Design spec: docs/superpowers/specs/2026-07-06-site-builder-feedback-batch-design.md Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
306 lines
12 KiB
TypeScript
306 lines
12 KiB
TypeScript
import React, { CSSProperties } from 'react';
|
|
import { useNode, UserComponent } from '@craftjs/core';
|
|
import { cssPropsToString } from '../../utils/style-helpers';
|
|
import { AnchorIdField } from '../../ui/AnchorIdField';
|
|
|
|
interface FeatureItem {
|
|
title: string;
|
|
description: string;
|
|
icon: string;
|
|
mediaType?: 'icon' | 'image'; // default behaves as 'icon' when undefined
|
|
image?: string;
|
|
imageAlt?: string;
|
|
buttonText?: string;
|
|
buttonUrl?: string;
|
|
}
|
|
|
|
/* ---------- Image upload helper (same as Navbar/ImageBlock) ---------- */
|
|
|
|
async function uploadToWhp(file: File): Promise<string | null> {
|
|
const cfg = (window as any).WHP_CONFIG;
|
|
if (!cfg) return URL.createObjectURL(file);
|
|
const formData = new FormData();
|
|
formData.append('file', file);
|
|
try {
|
|
const resp = await fetch(`${cfg.apiUrl}?action=upload_asset&site_id=${cfg.siteId}`, {
|
|
method: 'POST',
|
|
headers: { 'X-CSRF-Token': cfg.csrfToken },
|
|
body: formData,
|
|
});
|
|
const data = await resp.json();
|
|
if (data.success && data.url) return data.url;
|
|
return null;
|
|
} catch { return null; }
|
|
}
|
|
|
|
interface FeaturesGridProps {
|
|
features?: FeatureItem[];
|
|
style?: CSSProperties;
|
|
anchorId?: string;
|
|
}
|
|
|
|
const defaultFeatures: FeatureItem[] = [
|
|
{ title: 'Fast & Reliable', description: 'Built for performance with optimized loading and rock-solid uptime.', icon: '⚡' },
|
|
{ title: 'Easy to Use', description: 'Intuitive drag-and-drop interface that anyone can master in minutes.', icon: '✨' },
|
|
{ title: 'Fully Responsive', description: 'Looks great on every device, from phones to ultrawide monitors.', icon: '📱' },
|
|
];
|
|
|
|
export const FeaturesGrid: UserComponent<FeaturesGridProps> = ({
|
|
features = defaultFeatures,
|
|
style = {},
|
|
anchorId,
|
|
}) => {
|
|
const {
|
|
connectors: { connect, drag },
|
|
selected,
|
|
} = useNode((node) => ({
|
|
selected: node.events.selected,
|
|
}));
|
|
|
|
return (
|
|
<section
|
|
ref={(ref: HTMLElement | null): void => { if (ref) connect(drag(ref)); }}
|
|
id={anchorId || undefined}
|
|
style={{
|
|
padding: '80px 20px',
|
|
backgroundColor: '#ffffff',
|
|
outline: selected ? '2px solid #3b82f6' : 'none',
|
|
...style,
|
|
}}
|
|
>
|
|
<div style={{ maxWidth: '1100px', margin: '0 auto', display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: '32px' }}>
|
|
{(Array.isArray(features) ? features : []).map((feat, i) => (
|
|
<div
|
|
key={i}
|
|
style={{
|
|
textAlign: 'center',
|
|
padding: '32px 24px',
|
|
borderRadius: '12px',
|
|
backgroundColor: '#f8fafc',
|
|
border: '1px solid #e2e8f0',
|
|
}}
|
|
>
|
|
{feat.mediaType === 'image' && feat.image ? (
|
|
<img
|
|
src={feat.image}
|
|
alt={feat.imageAlt || feat.title || ''}
|
|
style={{ maxWidth: '100%', height: 'auto', marginBottom: '16px', borderRadius: '8px' }}
|
|
/>
|
|
) : (
|
|
<div style={{ fontSize: '36px', marginBottom: '16px' }}>{feat.icon}</div>
|
|
)}
|
|
<h3 style={{ fontSize: '20px', fontWeight: '600', color: '#18181b', marginBottom: '8px' }}>{feat.title}</h3>
|
|
<p style={{ fontSize: '14px', color: '#64748b', lineHeight: '1.6' }}>{feat.description}</p>
|
|
{feat.buttonText ? (
|
|
<a
|
|
href={feat.buttonUrl || '#'}
|
|
onClick={(e) => e.preventDefault()}
|
|
style={{ display: 'inline-block', marginTop: '16px', padding: '10px 24px', background: '#3b82f6', color: '#fff', borderRadius: '8px', textDecoration: 'none', fontSize: '14px', fontWeight: 600 }}
|
|
>
|
|
{feat.buttonText}
|
|
</a>
|
|
) : null}
|
|
</div>
|
|
))}
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
/* ---------- Settings panel ---------- */
|
|
|
|
const FeaturesGridSettings: React.FC = () => {
|
|
const { actions: { setProp }, props } = useNode((node) => ({
|
|
props: node.data.props as FeaturesGridProps,
|
|
}));
|
|
|
|
const features = props.features || defaultFeatures;
|
|
|
|
const inputStyle: CSSProperties = {
|
|
width: '100%', padding: '3px 6px', background: '#27272a', color: '#e4e4e7',
|
|
border: '1px solid #3f3f46', borderRadius: 4, fontSize: 11,
|
|
};
|
|
|
|
const updateFeature = (index: number, field: keyof FeatureItem, value: string) => {
|
|
setProp((p: FeaturesGridProps) => {
|
|
const updated = [...(p.features || defaultFeatures)];
|
|
updated[index] = { ...updated[index], [field]: value };
|
|
p.features = updated;
|
|
});
|
|
};
|
|
|
|
const handleImageUpload = async (index: number, file: File) => {
|
|
const url = await uploadToWhp(file);
|
|
if (url) updateFeature(index, 'image', url);
|
|
};
|
|
|
|
const addFeature = () => {
|
|
setProp((p: FeaturesGridProps) => {
|
|
p.features = [...(p.features || defaultFeatures), { title: 'New Feature', description: 'Describe this feature.', icon: '🔧' }];
|
|
});
|
|
};
|
|
|
|
const removeFeature = (index: number) => {
|
|
setProp((p: FeaturesGridProps) => {
|
|
const updated = [...(p.features || defaultFeatures)];
|
|
updated.splice(index, 1);
|
|
p.features = updated;
|
|
});
|
|
};
|
|
|
|
const bgPresets = ['#ffffff', '#f8fafc', '#f1f5f9', '#18181b', '#0f172a'];
|
|
|
|
return (
|
|
<div style={{ padding: '12px', display: 'flex', flexDirection: 'column', gap: '14px' }}>
|
|
<AnchorIdField />
|
|
<div>
|
|
<label style={{ fontSize: 11, color: '#a1a1aa', display: 'block', marginBottom: 6 }}>Background</label>
|
|
<div style={{ display: 'flex', gap: 4, flexWrap: 'wrap' }}>
|
|
{bgPresets.map((c) => (
|
|
<button
|
|
key={c}
|
|
onClick={() => setProp((p: FeaturesGridProps) => { p.style = { ...p.style, backgroundColor: c }; })}
|
|
style={{
|
|
width: 24, height: 24, borderRadius: 4, border: '1px solid #3f3f46',
|
|
backgroundColor: c, cursor: 'pointer',
|
|
outline: props.style?.backgroundColor === c ? '2px solid #3b82f6' : 'none',
|
|
outlineOffset: 1,
|
|
}}
|
|
/>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<label style={{ fontSize: 11, color: '#a1a1aa', display: 'block', marginBottom: 6 }}>Features</label>
|
|
<div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
|
|
{(Array.isArray(features) ? features : []).map((feat, i) => (
|
|
<div key={i} style={{ background: '#1e1e22', borderRadius: 6, padding: 8, display: 'flex', flexDirection: 'column', gap: 4 }}>
|
|
<div style={{ display: 'flex', gap: 4 }}>
|
|
<input type="text" value={feat.icon} onChange={(e) => updateFeature(i, 'icon', e.target.value)} placeholder="Icon" style={{ ...inputStyle, width: 40, flex: 'none', textAlign: 'center' }} />
|
|
<input type="text" value={feat.title} onChange={(e) => updateFeature(i, 'title', e.target.value)} placeholder="Title" style={{ ...inputStyle, flex: 1 }} />
|
|
<button
|
|
onClick={() => removeFeature(i)}
|
|
style={{ padding: '2px 6px', fontSize: 11, background: '#ef4444', color: '#fff', border: 'none', borderRadius: 4, cursor: 'pointer' }}
|
|
>
|
|
X
|
|
</button>
|
|
</div>
|
|
<textarea
|
|
value={feat.description}
|
|
onChange={(e) => updateFeature(i, 'description', e.target.value)}
|
|
placeholder="Description"
|
|
rows={2}
|
|
style={{ ...inputStyle, resize: 'vertical' }}
|
|
/>
|
|
|
|
{/* Icon / Image toggle */}
|
|
<div style={{ display: 'flex', gap: 4 }}>
|
|
{(['icon', 'image'] as const).map((mt) => {
|
|
const active = (feat.mediaType || 'icon') === mt;
|
|
return (
|
|
<button
|
|
key={mt}
|
|
onClick={() => updateFeature(i, 'mediaType', mt)}
|
|
style={{
|
|
flex: 1, padding: '3px 6px', fontSize: 11, cursor: 'pointer',
|
|
background: active ? '#3b82f6' : '#27272a',
|
|
color: active ? '#fff' : '#e4e4e7',
|
|
border: '1px solid #3f3f46', borderRadius: 4,
|
|
}}
|
|
>
|
|
{mt === 'icon' ? 'Icon' : 'Image'}
|
|
</button>
|
|
);
|
|
})}
|
|
</div>
|
|
|
|
{(feat.mediaType || 'icon') === 'image' ? (
|
|
<>
|
|
<div style={{ display: 'flex', gap: 4 }}>
|
|
<label
|
|
style={{ padding: '3px 6px', fontSize: 11, cursor: 'pointer', background: '#27272a', color: '#e4e4e7', border: '1px solid #3f3f46', borderRadius: 4, flex: 'none', whiteSpace: 'nowrap' }}
|
|
>
|
|
Upload
|
|
<input
|
|
type="file"
|
|
accept="image/*"
|
|
style={{ display: 'none' }}
|
|
onChange={(e) => { const f = e.target.files?.[0]; if (f) void handleImageUpload(i, f); }}
|
|
/>
|
|
</label>
|
|
<input type="text" value={feat.image || ''} onChange={(e) => updateFeature(i, 'image', e.target.value)} placeholder="Image URL" style={{ ...inputStyle, flex: 1 }} />
|
|
</div>
|
|
<input type="text" value={feat.imageAlt || ''} onChange={(e) => updateFeature(i, 'imageAlt', e.target.value)} placeholder="Alt text (optional)" style={inputStyle} />
|
|
</>
|
|
) : null}
|
|
|
|
{/* Button (optional) */}
|
|
<label style={{ fontSize: 11, color: '#a1a1aa', display: 'block', marginTop: 2 }}>Button (optional)</label>
|
|
<input type="text" value={feat.buttonText || ''} onChange={(e) => updateFeature(i, 'buttonText', e.target.value)} placeholder="Button text" style={inputStyle} />
|
|
<input type="text" value={feat.buttonUrl || ''} onChange={(e) => updateFeature(i, 'buttonUrl', e.target.value)} placeholder="https://... or /page" style={inputStyle} />
|
|
</div>
|
|
))}
|
|
</div>
|
|
<button
|
|
onClick={addFeature}
|
|
style={{ marginTop: 6, width: '100%', padding: '6px', fontSize: 11, background: '#27272a', color: '#e4e4e7', border: '1px solid #3f3f46', borderRadius: 4, cursor: 'pointer' }}
|
|
>
|
|
+ Add Feature
|
|
</button>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
/* ---------- Craft config ---------- */
|
|
|
|
FeaturesGrid.craft = {
|
|
displayName: 'Features Grid',
|
|
props: {
|
|
features: defaultFeatures,
|
|
style: { backgroundColor: '#ffffff' },
|
|
anchorId: '',
|
|
},
|
|
rules: {
|
|
canDrag: () => true,
|
|
canMoveIn: () => false,
|
|
canMoveOut: () => true,
|
|
},
|
|
related: {
|
|
settings: FeaturesGridSettings,
|
|
},
|
|
};
|
|
|
|
/* ---------- HTML export ---------- */
|
|
|
|
(FeaturesGrid as any).toHtml = (props: FeaturesGridProps, _childrenHtml: string) => {
|
|
const esc = (s: any) => String(s ?? "").replace(/</g, '<').replace(/>/g, '>').replace(/"/g, '"');
|
|
const sectionStyle = cssPropsToString({
|
|
padding: '80px 20px',
|
|
...props.style,
|
|
});
|
|
const idAttr = props.anchorId ? ` id="${esc(props.anchorId)}"` : '';
|
|
const cards = (props.features || defaultFeatures).map((feat) => {
|
|
const media = feat.mediaType === 'image' && feat.image
|
|
? `<img src="${esc(feat.image)}" alt="${esc(feat.imageAlt || feat.title || '')}" style="max-width:100%;height:auto;margin-bottom:16px;border-radius:8px">`
|
|
: `<div style="font-size:36px;margin-bottom:16px">${esc(feat.icon)}</div>`;
|
|
const button = feat.buttonText
|
|
? `\n <a href="${esc(feat.buttonUrl || '#')}" style="display:inline-block;margin-top:16px;padding:10px 24px;background:#3b82f6;color:#fff;border-radius:8px;text-decoration:none;font-size:14px;font-weight:600">${esc(feat.buttonText)}</a>`
|
|
: '';
|
|
return `<div style="text-align:center;padding:32px 24px;border-radius:12px;background-color:#f8fafc;border:1px solid #e2e8f0">
|
|
${media}
|
|
<h3 style="font-size:20px;font-weight:600;color:#18181b;margin-bottom:8px">${esc(feat.title)}</h3>
|
|
<p style="font-size:14px;color:#64748b;line-height:1.6">${esc(feat.description)}</p>${button}
|
|
</div>`;
|
|
}).join('\n ');
|
|
|
|
return {
|
|
html: `<section${idAttr}${sectionStyle ? ` style="${sectionStyle}"` : ''}>
|
|
<div style="max-width:1100px;margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:32px">
|
|
${cards}
|
|
</div>
|
|
</section>`,
|
|
};
|
|
};
|