shadowdao
069ea1235a
Real-world AI output frequently sends mismatched prop names (e.g. items vs features, cta object vs buttonText/Href). The toHtml functions of section/form/sections-folder components each defined a local esc = (s: string) => s.replace(...) that crashed when called with undefined, taking the auto-save export with it. Patched every local esc() to coerce non-strings: const esc = (s: any) => String(s ?? "").replace(...) 17 files touched; behavior unchanged for valid string inputs. Also adds a WorkingIndicator (Claude Code-style spinner + rotating phrase + elapsed seconds) shown in the modal footer while a generation is in flight, replacing the disabled "Thinking..." placeholder.
369 lines
12 KiB
TypeScript
369 lines
12 KiB
TypeScript
import React, { CSSProperties } from 'react';
|
|
import { useNode, UserComponent } from '@craftjs/core';
|
|
import { cssPropsToString } from '../../utils/style-helpers';
|
|
|
|
interface Counter {
|
|
number: number;
|
|
suffix: string;
|
|
label: string;
|
|
}
|
|
|
|
interface NumberCounterProps {
|
|
counters?: Counter[];
|
|
columns?: number;
|
|
numberColor?: string;
|
|
labelColor?: string;
|
|
numberSize?: string;
|
|
style?: CSSProperties;
|
|
}
|
|
|
|
const defaultCounters: Counter[] = [
|
|
{ number: 150, suffix: '+', label: 'Projects' },
|
|
{ number: 50, suffix: '+', label: 'Clients' },
|
|
{ number: 10, suffix: '', label: 'Years' },
|
|
{ number: 99, suffix: '%', label: 'Satisfaction' },
|
|
];
|
|
|
|
export const NumberCounter: UserComponent<NumberCounterProps> = ({
|
|
counters = defaultCounters,
|
|
columns = 4,
|
|
numberColor = '#3b82f6',
|
|
labelColor = '#6b7280',
|
|
numberSize = '48px',
|
|
style = {},
|
|
}) => {
|
|
const {
|
|
connectors: { connect, drag },
|
|
selected,
|
|
} = useNode((node) => ({
|
|
selected: node.events.selected,
|
|
}));
|
|
|
|
const items = counters.length > 0 ? counters : defaultCounters;
|
|
|
|
return (
|
|
<section
|
|
ref={(ref: HTMLElement | null): void => { if (ref) connect(drag(ref)); }}
|
|
style={{
|
|
padding: '60px 20px',
|
|
backgroundColor: '#ffffff',
|
|
outline: selected ? '2px solid #3b82f6' : 'none',
|
|
...style,
|
|
}}
|
|
>
|
|
<div
|
|
style={{
|
|
maxWidth: '1100px',
|
|
margin: '0 auto',
|
|
display: 'grid',
|
|
gridTemplateColumns: `repeat(${columns}, 1fr)`,
|
|
gap: '32px',
|
|
textAlign: 'center',
|
|
}}
|
|
>
|
|
{items.map((counter, i) => (
|
|
<div key={i} style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '8px' }}>
|
|
<span style={{
|
|
fontSize: numberSize,
|
|
fontWeight: '700',
|
|
color: numberColor,
|
|
lineHeight: '1.1',
|
|
fontFamily: 'Inter, sans-serif',
|
|
}}>
|
|
{counter.number}{counter.suffix}
|
|
</span>
|
|
<span style={{
|
|
fontSize: '15px',
|
|
color: labelColor,
|
|
fontFamily: 'Inter, sans-serif',
|
|
fontWeight: '500',
|
|
}}>
|
|
{counter.label}
|
|
</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
/* ---------- Settings panel ---------- */
|
|
|
|
const NumberCounterSettings: React.FC = () => {
|
|
const { actions: { setProp }, props } = useNode((node) => ({
|
|
props: node.data.props as NumberCounterProps,
|
|
}));
|
|
|
|
const items = props.counters || defaultCounters;
|
|
|
|
const labelStyle: CSSProperties = { fontSize: 11, color: '#a1a1aa', display: 'block', marginBottom: 6 };
|
|
const inputStyle: CSSProperties = {
|
|
width: '100%', padding: '3px 6px', background: '#27272a', color: '#e4e4e7',
|
|
border: '1px solid #3f3f46', borderRadius: 4, fontSize: 11,
|
|
};
|
|
|
|
const columnOptions = [2, 3, 4, 5, 6];
|
|
const sizePresets = ['32px', '40px', '48px', '56px', '64px'];
|
|
const numberColorPresets = ['#3b82f6', '#10b981', '#8b5cf6', '#ef4444', '#f59e0b', '#18181b', '#ec4899', '#0ea5e9'];
|
|
const labelColorPresets = ['#6b7280', '#374151', '#9ca3af', '#a1a1aa', '#64748b', '#18181b'];
|
|
const bgPresets = ['#ffffff', '#f8fafc', '#f1f5f9', '#18181b', '#0f172a'];
|
|
|
|
const updateCounter = (index: number, field: keyof Counter, value: string | number) => {
|
|
setProp((p: NumberCounterProps) => {
|
|
const updated = [...(p.counters || defaultCounters)];
|
|
updated[index] = { ...updated[index], [field]: value };
|
|
p.counters = updated;
|
|
});
|
|
};
|
|
|
|
const addCounter = () => {
|
|
setProp((p: NumberCounterProps) => {
|
|
p.counters = [...(p.counters || defaultCounters), { number: 100, suffix: '+', label: 'New Stat' }];
|
|
});
|
|
};
|
|
|
|
const removeCounter = (index: number) => {
|
|
setProp((p: NumberCounterProps) => {
|
|
const updated = [...(p.counters || defaultCounters)];
|
|
updated.splice(index, 1);
|
|
p.counters = updated;
|
|
});
|
|
};
|
|
|
|
return (
|
|
<div style={{ padding: '12px', display: 'flex', flexDirection: 'column', gap: '14px' }}>
|
|
{/* Columns */}
|
|
<div>
|
|
<label style={labelStyle}>Columns</label>
|
|
<div style={{ display: 'flex', gap: 4 }}>
|
|
{columnOptions.map((n) => (
|
|
<button
|
|
key={n}
|
|
onClick={() => setProp((p: NumberCounterProps) => { p.columns = n; })}
|
|
style={{
|
|
padding: '4px 10px', fontSize: 11, borderRadius: 4, cursor: 'pointer',
|
|
border: '1px solid #3f3f46',
|
|
background: (props.columns || 4) === n ? '#3b82f6' : '#27272a',
|
|
color: '#e4e4e7',
|
|
}}
|
|
>
|
|
{n}
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Number Size */}
|
|
<div>
|
|
<label style={labelStyle}>Number Size</label>
|
|
<div style={{ display: 'flex', gap: 4, flexWrap: 'wrap' }}>
|
|
{sizePresets.map((s) => (
|
|
<button
|
|
key={s}
|
|
onClick={() => setProp((p: NumberCounterProps) => { p.numberSize = s; })}
|
|
style={{
|
|
padding: '4px 8px', fontSize: 11, borderRadius: 4, cursor: 'pointer',
|
|
border: '1px solid #3f3f46',
|
|
background: (props.numberSize || '48px') === s ? '#3b82f6' : '#27272a',
|
|
color: (props.numberSize || '48px') === s ? '#fff' : '#e4e4e7',
|
|
}}
|
|
>
|
|
{s}
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Number Color */}
|
|
<div>
|
|
<label style={labelStyle}>Number Color</label>
|
|
<div style={{ display: 'flex', gap: 4, flexWrap: 'wrap' }}>
|
|
{numberColorPresets.map((c) => (
|
|
<button
|
|
key={c}
|
|
onClick={() => setProp((p: NumberCounterProps) => { p.numberColor = c; })}
|
|
style={{
|
|
width: 24, height: 24, borderRadius: 4, border: '1px solid #3f3f46',
|
|
backgroundColor: c, cursor: 'pointer',
|
|
outline: (props.numberColor || '#3b82f6') === c ? '2px solid #3b82f6' : 'none',
|
|
outlineOffset: 1,
|
|
}}
|
|
/>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Label Color */}
|
|
<div>
|
|
<label style={labelStyle}>Label Color</label>
|
|
<div style={{ display: 'flex', gap: 4, flexWrap: 'wrap' }}>
|
|
{labelColorPresets.map((c) => (
|
|
<button
|
|
key={c}
|
|
onClick={() => setProp((p: NumberCounterProps) => { p.labelColor = c; })}
|
|
style={{
|
|
width: 24, height: 24, borderRadius: 4, border: '1px solid #3f3f46',
|
|
backgroundColor: c, cursor: 'pointer',
|
|
outline: (props.labelColor || '#6b7280') === c ? '2px solid #3b82f6' : 'none',
|
|
outlineOffset: 1,
|
|
}}
|
|
/>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Background */}
|
|
<div>
|
|
<label style={labelStyle}>Background</label>
|
|
<div style={{ display: 'flex', gap: 4, flexWrap: 'wrap' }}>
|
|
{bgPresets.map((c) => (
|
|
<button
|
|
key={c}
|
|
onClick={() => setProp((p: NumberCounterProps) => { 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>
|
|
|
|
{/* Counters */}
|
|
<div>
|
|
<label style={labelStyle}>Counters</label>
|
|
<div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
|
|
{items.map((counter, i) => (
|
|
<div key={i} style={{ background: '#1e1e22', borderRadius: 6, padding: 8, display: 'flex', flexDirection: 'column', gap: 4 }}>
|
|
<div style={{ display: 'flex', gap: 4, alignItems: 'center' }}>
|
|
<input
|
|
type="number"
|
|
value={counter.number}
|
|
onChange={(e) => updateCounter(i, 'number', parseInt(e.target.value) || 0)}
|
|
placeholder="Number"
|
|
style={{ ...inputStyle, width: 70, flex: 'none' }}
|
|
/>
|
|
<input
|
|
type="text"
|
|
value={counter.suffix}
|
|
onChange={(e) => updateCounter(i, 'suffix', e.target.value)}
|
|
placeholder="Suffix"
|
|
style={{ ...inputStyle, width: 40, flex: 'none' }}
|
|
/>
|
|
<input
|
|
type="text"
|
|
value={counter.label}
|
|
onChange={(e) => updateCounter(i, 'label', e.target.value)}
|
|
placeholder="Label"
|
|
style={{ ...inputStyle, flex: 1 }}
|
|
/>
|
|
<button
|
|
onClick={() => removeCounter(i)}
|
|
style={{ padding: '2px 6px', fontSize: 11, background: '#ef4444', color: '#fff', border: 'none', borderRadius: 4, cursor: 'pointer', flex: 'none' }}
|
|
>
|
|
X
|
|
</button>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
<button
|
|
onClick={addCounter}
|
|
style={{ marginTop: 6, width: '100%', padding: '6px', fontSize: 11, background: '#27272a', color: '#e4e4e7', border: '1px solid #3f3f46', borderRadius: 4, cursor: 'pointer' }}
|
|
>
|
|
+ Add Counter
|
|
</button>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
/* ---------- Craft config ---------- */
|
|
|
|
NumberCounter.craft = {
|
|
displayName: 'Number Counter',
|
|
props: {
|
|
counters: defaultCounters,
|
|
columns: 4,
|
|
numberColor: '#3b82f6',
|
|
labelColor: '#6b7280',
|
|
numberSize: '48px',
|
|
style: { backgroundColor: '#ffffff' },
|
|
},
|
|
rules: {
|
|
canDrag: () => true,
|
|
canMoveIn: () => false,
|
|
canMoveOut: () => true,
|
|
},
|
|
related: {
|
|
settings: NumberCounterSettings,
|
|
},
|
|
};
|
|
|
|
/* ---------- HTML export ---------- */
|
|
|
|
(NumberCounter as any).toHtml = (props: NumberCounterProps, _childrenHtml: string) => {
|
|
const esc = (s: any) => String(s ?? "").replace(/</g, '<').replace(/>/g, '>').replace(/"/g, '"');
|
|
const {
|
|
counters = defaultCounters,
|
|
columns = 4,
|
|
numberColor = '#3b82f6',
|
|
labelColor = '#6b7280',
|
|
numberSize = '48px',
|
|
style = {},
|
|
} = props;
|
|
|
|
const items = counters.length > 0 ? counters : defaultCounters;
|
|
const uid = 'nc_' + Math.random().toString(36).slice(2, 8);
|
|
|
|
const sectionStyle = cssPropsToString({
|
|
padding: '60px 20px',
|
|
backgroundColor: '#ffffff',
|
|
...style,
|
|
});
|
|
|
|
const countersHtml = items.map((counter, i) => {
|
|
return `<div style="display:flex;flex-direction:column;align-items:center;gap:8px">
|
|
<span id="${uid}_n${i}" data-target="${counter.number}" data-suffix="${esc(counter.suffix)}" style="font-size:${numberSize};font-weight:700;color:${numberColor};line-height:1.1;font-family:Inter,sans-serif">0${esc(counter.suffix)}</span>
|
|
<span style="font-size:15px;color:${labelColor};font-family:Inter,sans-serif;font-weight:500">${esc(counter.label)}</span>
|
|
</div>`;
|
|
}).join('\n ');
|
|
|
|
return {
|
|
html: `<section${sectionStyle ? ` style="${sectionStyle}"` : ''}>
|
|
<div id="${uid}" style="max-width:1100px;margin:0 auto;display:grid;grid-template-columns:repeat(${columns},1fr);gap:32px;text-align:center">
|
|
${countersHtml}
|
|
</div>
|
|
<script>
|
|
(function(){
|
|
var uid="${uid}",started=false;
|
|
function animate(){
|
|
if(started)return;started=true;
|
|
for(var i=0;i<${items.length};i++){
|
|
(function(el){
|
|
var target=parseInt(el.getAttribute("data-target")),
|
|
suffix=el.getAttribute("data-suffix")||"",
|
|
current=0,
|
|
step=Math.max(1,Math.floor(target/60)),
|
|
timer=setInterval(function(){
|
|
current+=step;
|
|
if(current>=target){current=target;clearInterval(timer);}
|
|
el.textContent=current+suffix;
|
|
},16);
|
|
})(document.getElementById(uid+"_n"+i));
|
|
}
|
|
}
|
|
if("IntersectionObserver"in window){
|
|
var obs=new IntersectionObserver(function(entries){
|
|
entries.forEach(function(e){if(e.isIntersecting){animate();obs.disconnect();}});
|
|
},{threshold:0.2});
|
|
obs.observe(document.getElementById(uid));
|
|
}else{animate();}
|
|
})();
|
|
</script>
|
|
</section>`,
|
|
};
|
|
};
|