Add Craft.js site builder (v2) - complete rebuild from GrapesJS

Rebuilt the visual site builder from scratch using Craft.js, React 18, and TypeScript. The new editor renders directly in the DOM (no iframe), supports 40+ components, multi-page with shared header/footer, 16 templates, full-spectrum color/gradient controls, custom head code injection, save/publish workflow, and auto-save. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-04-05 18:31:16 -07:00
parent b511a6684d
commit 91a6b6f34b
103 changed files with 26296 additions and 0 deletions
@@ -0,0 +1,530 @@
+import React, { CSSProperties, useState, useEffect, useRef, useCallback } from 'react';
+import { useNode, UserComponent } from '@craftjs/core';
+import { cssPropsToString } from '../../utils/style-helpers';
+
+interface Slide {
+  type: 'image' | 'content';
+  imageSrc?: string;
+  heading?: string;
+  text?: string;
+  buttonText?: string;
+  buttonHref?: string;
+  bgColor?: string;
+}
+
+interface ContentSliderProps {
+  slides?: Slide[];
+  autoplay?: boolean;
+  interval?: number;
+  showDots?: boolean;
+  showArrows?: boolean;
+  height?: string;
+  style?: CSSProperties;
+}
+
+const defaultSlides: Slide[] = [
+  {
+    type: 'image',
+    imageSrc: '',
+    heading: 'First Slide',
+    text: 'Welcome to our showcase',
+    buttonText: 'Learn More',
+    buttonHref: '#',
+    bgColor: 'linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%)',
+  },
+  {
+    type: 'image',
+    imageSrc: '',
+    heading: 'Second Slide',
+    text: 'Discover something amazing',
+    buttonText: 'Get Started',
+    buttonHref: '#',
+    bgColor: 'linear-gradient(135deg, #10b981 0%, #059669 100%)',
+  },
+  {
+    type: 'image',
+    imageSrc: '',
+    heading: 'Third Slide',
+    text: 'Build your future today',
+    buttonText: 'Contact Us',
+    buttonHref: '#',
+    bgColor: 'linear-gradient(135deg, #f59e0b 0%, #ef4444 100%)',
+  },
+];
+
+export const ContentSlider: UserComponent<ContentSliderProps> = ({
+  slides = defaultSlides,
+  autoplay = true,
+  interval = 5000,
+  showDots = true,
+  showArrows = true,
+  height = '400px',
+  style = {},
+}) => {
+  const {
+    connectors: { connect, drag },
+    selected,
+  } = useNode((node) => ({
+    selected: node.events.selected,
+  }));
+
+  const [activeIndex, setActiveIndex] = useState(0);
+  const timerRef = useRef<ReturnType<typeof setInterval> | null>(null);
+  const items = slides.length > 0 ? slides : defaultSlides;
+
+  const goTo = useCallback((index: number) => {
+    setActiveIndex(((index % items.length) + items.length) % items.length);
+  }, [items.length]);
+
+  const goNext = useCallback(() => goTo(activeIndex + 1), [activeIndex, goTo]);
+  const goPrev = useCallback(() => goTo(activeIndex - 1), [activeIndex, goTo]);
+
+  useEffect(() => {
+    if (autoplay && items.length > 1) {
+      timerRef.current = setInterval(goNext, interval);
+      return () => { if (timerRef.current) clearInterval(timerRef.current); };
+    }
+  }, [autoplay, interval, goNext, items.length]);
+
+  const arrowStyle: CSSProperties = {
+    position: 'absolute',
+    top: '50%',
+    transform: 'translateY(-50%)',
+    width: '40px',
+    height: '40px',
+    borderRadius: '50%',
+    border: 'none',
+    background: 'rgba(255,255,255,0.9)',
+    color: '#18181b',
+    fontSize: '16px',
+    cursor: 'pointer',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    zIndex: 2,
+    boxShadow: '0 2px 8px rgba(0,0,0,0.15)',
+  };
+
+  const renderSlide = (slide: Slide, i: number) => {
+    const bg = slide.imageSrc
+      ? { backgroundImage: `url(${slide.imageSrc})`, backgroundSize: 'cover', backgroundPosition: 'center' }
+      : slide.bgColor?.startsWith('linear-gradient')
+        ? { backgroundImage: slide.bgColor }
+        : { backgroundColor: slide.bgColor || '#3b82f6' };
+
+    return (
+      <div
+        key={i}
+        style={{
+          position: 'absolute',
+          top: 0,
+          left: 0,
+          width: '100%',
+          height: '100%',
+          opacity: i === activeIndex ? 1 : 0,
+          transition: 'opacity 0.5s ease-in-out',
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'center',
+          justifyContent: 'center',
+          ...bg,
+        }}
+      >
+        {(slide.heading || slide.text || slide.buttonText) && (
+          <div style={{ textAlign: 'center', padding: '20px', zIndex: 1 }}>
+            {slide.heading && (
+              <h2 style={{ fontSize: '36px', fontWeight: '700', color: '#ffffff', marginBottom: '12px', fontFamily: 'Inter, sans-serif', textShadow: '0 2px 8px rgba(0,0,0,0.3)' }}>
+                {slide.heading}
+              </h2>
+            )}
+            {slide.text && (
+              <p style={{ fontSize: '18px', color: 'rgba(255,255,255,0.9)', marginBottom: '20px', fontFamily: 'Inter, sans-serif', textShadow: '0 1px 4px rgba(0,0,0,0.3)' }}>
+                {slide.text}
+              </p>
+            )}
+            {slide.buttonText && (
+              <a
+                href={slide.buttonHref || '#'}
+                onClick={(e) => e.preventDefault()}
+                style={{
+                  display: 'inline-block',
+                  padding: '12px 28px',
+                  background: '#ffffff',
+                  color: '#18181b',
+                  textDecoration: 'none',
+                  borderRadius: '8px',
+                  fontWeight: '600',
+                  fontSize: '15px',
+                  fontFamily: 'Inter, sans-serif',
+                }}
+              >
+                {slide.buttonText}
+              </a>
+            )}
+          </div>
+        )}
+      </div>
+    );
+  };
+
+  return (
+    <section
+      ref={(ref: HTMLElement | null): void => { if (ref) connect(drag(ref)); }}
+      style={{
+        position: 'relative',
+        width: '100%',
+        height,
+        overflow: 'hidden',
+        outline: selected ? '2px solid #3b82f6' : 'none',
+        ...style,
+      }}
+    >
+      {items.map((slide, i) => renderSlide(slide, i))}
+
+      {showArrows && items.length > 1 && (
+        <>
+          <button onClick={goPrev} style={{ ...arrowStyle, left: '16px' }}>
+            <i className="fa fa-chevron-left" />
+          </button>
+          <button onClick={goNext} style={{ ...arrowStyle, right: '16px' }}>
+            <i className="fa fa-chevron-right" />
+          </button>
+        </>
+      )}
+
+      {showDots && items.length > 1 && (
+        <div style={{ position: 'absolute', bottom: '16px', left: '50%', transform: 'translateX(-50%)', display: 'flex', gap: '8px', zIndex: 2 }}>
+          {items.map((_, i) => (
+            <button
+              key={i}
+              onClick={() => goTo(i)}
+              style={{
+                width: '10px',
+                height: '10px',
+                borderRadius: '50%',
+                border: 'none',
+                cursor: 'pointer',
+                backgroundColor: i === activeIndex ? '#ffffff' : 'rgba(255,255,255,0.5)',
+                transition: 'background-color 0.3s',
+              }}
+            />
+          ))}
+        </div>
+      )}
+    </section>
+  );
+};
+
+/* ---------- Settings panel ---------- */
+
+const ContentSliderSettings: React.FC = () => {
+  const { actions: { setProp }, props } = useNode((node) => ({
+    props: node.data.props as ContentSliderProps,
+  }));
+
+  const items = props.slides || defaultSlides;
+
+  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 heightPresets = ['300px', '400px', '500px', '600px', '80vh'];
+  const intervalPresets = [3000, 4000, 5000, 7000, 10000];
+  const bgPresets = [
+    'linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%)',
+    'linear-gradient(135deg, #10b981 0%, #059669 100%)',
+    'linear-gradient(135deg, #f59e0b 0%, #ef4444 100%)',
+    'linear-gradient(135deg, #ec4899 0%, #8b5cf6 100%)',
+    '#18181b',
+    '#0f172a',
+    '#1e293b',
+    '#3b82f6',
+  ];
+
+  const updateSlide = (index: number, field: keyof Slide, value: string) => {
+    setProp((p: ContentSliderProps) => {
+      const updated = [...(p.slides || defaultSlides)];
+      updated[index] = { ...updated[index], [field]: value };
+      p.slides = updated;
+    });
+  };
+
+  const addSlide = () => {
+    setProp((p: ContentSliderProps) => {
+      const current = p.slides || defaultSlides;
+      p.slides = [...current, {
+        type: 'image',
+        imageSrc: '',
+        heading: 'New Slide',
+        text: 'Add your content here',
+        buttonText: '',
+        buttonHref: '#',
+        bgColor: 'linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%)',
+      }];
+    });
+  };
+
+  const removeSlide = (index: number) => {
+    setProp((p: ContentSliderProps) => {
+      const updated = [...(p.slides || defaultSlides)];
+      updated.splice(index, 1);
+      p.slides = updated;
+    });
+  };
+
+  return (
+    <div style={{ padding: '12px', display: 'flex', flexDirection: 'column', gap: '14px' }}>
+      {/* Height */}
+      <div>
+        <label style={labelStyle}>Height</label>
+        <div style={{ display: 'flex', gap: 4, flexWrap: 'wrap' }}>
+          {heightPresets.map((h) => (
+            <button
+              key={h}
+              onClick={() => setProp((p: ContentSliderProps) => { p.height = h; })}
+              style={{
+                padding: '4px 8px', fontSize: 11, borderRadius: 4, cursor: 'pointer',
+                border: '1px solid #3f3f46',
+                background: props.height === h ? '#3b82f6' : '#27272a',
+                color: props.height === h ? '#fff' : '#e4e4e7',
+              }}
+            >
+              {h}
+            </button>
+          ))}
+        </div>
+      </div>
+
+      {/* Autoplay */}
+      <div>
+        <label style={{ ...labelStyle, display: 'flex', alignItems: 'center', gap: 6 }}>
+          <input
+            type="checkbox"
+            checked={props.autoplay !== false}
+            onChange={(e) => setProp((p: ContentSliderProps) => { p.autoplay = e.target.checked; })}
+          />
+          Autoplay
+        </label>
+      </div>
+
+      {/* Interval */}
+      {props.autoplay !== false && (
+        <div>
+          <label style={labelStyle}>Interval (ms)</label>
+          <div style={{ display: 'flex', gap: 4, flexWrap: 'wrap' }}>
+            {intervalPresets.map((ms) => (
+              <button
+                key={ms}
+                onClick={() => setProp((p: ContentSliderProps) => { p.interval = ms; })}
+                style={{
+                  padding: '4px 8px', fontSize: 11, borderRadius: 4, cursor: 'pointer',
+                  border: '1px solid #3f3f46',
+                  background: (props.interval || 5000) === ms ? '#3b82f6' : '#27272a',
+                  color: (props.interval || 5000) === ms ? '#fff' : '#e4e4e7',
+                }}
+              >
+                {ms / 1000}s
+              </button>
+            ))}
+          </div>
+        </div>
+      )}
+
+      {/* Show Arrows */}
+      <div>
+        <label style={{ ...labelStyle, display: 'flex', alignItems: 'center', gap: 6 }}>
+          <input
+            type="checkbox"
+            checked={props.showArrows !== false}
+            onChange={(e) => setProp((p: ContentSliderProps) => { p.showArrows = e.target.checked; })}
+          />
+          Show Arrows
+        </label>
+      </div>
+
+      {/* Show Dots */}
+      <div>
+        <label style={{ ...labelStyle, display: 'flex', alignItems: 'center', gap: 6 }}>
+          <input
+            type="checkbox"
+            checked={props.showDots !== false}
+            onChange={(e) => setProp((p: ContentSliderProps) => { p.showDots = e.target.checked; })}
+          />
+          Show Dots
+        </label>
+      </div>
+
+      {/* Slides */}
+      <div>
+        <label style={labelStyle}>Slides</label>
+        <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
+          {items.map((slide, 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' }}>
+                <span style={{ fontSize: 11, color: '#a1a1aa', flex: 'none', width: 18 }}>{i + 1}.</span>
+                <select
+                  value={slide.type}
+                  onChange={(e) => updateSlide(i, 'type', e.target.value)}
+                  style={{ ...inputStyle, width: 70, flex: 'none', cursor: 'pointer' }}
+                >
+                  <option value="image">Image</option>
+                  <option value="content">Content</option>
+                </select>
+                <input type="text" value={slide.heading || ''} onChange={(e) => updateSlide(i, 'heading', e.target.value)} placeholder="Heading" style={{ ...inputStyle, flex: 1 }} />
+                <button
+                  onClick={() => removeSlide(i)}
+                  style={{ padding: '2px 6px', fontSize: 11, background: '#ef4444', color: '#fff', border: 'none', borderRadius: 4, cursor: 'pointer', flex: 'none' }}
+                >
+                  X
+                </button>
+              </div>
+              <input type="text" value={slide.imageSrc || ''} onChange={(e) => updateSlide(i, 'imageSrc', e.target.value)} placeholder="Image URL (optional)" style={inputStyle} />
+              <input type="text" value={slide.text || ''} onChange={(e) => updateSlide(i, 'text', e.target.value)} placeholder="Text" style={inputStyle} />
+              <div style={{ display: 'flex', gap: 4 }}>
+                <input type="text" value={slide.buttonText || ''} onChange={(e) => updateSlide(i, 'buttonText', e.target.value)} placeholder="Button text" style={{ ...inputStyle, flex: 1 }} />
+                <input type="text" value={slide.buttonHref || ''} onChange={(e) => updateSlide(i, 'buttonHref', e.target.value)} placeholder="Button URL" style={{ ...inputStyle, flex: 1 }} />
+              </div>
+              <div>
+                <span style={{ fontSize: 10, color: '#a1a1aa', display: 'block', marginBottom: 2 }}>Background</span>
+                <div style={{ display: 'flex', gap: 4, flexWrap: 'wrap' }}>
+                  {bgPresets.map((bg) => (
+                    <button
+                      key={bg}
+                      onClick={() => updateSlide(i, 'bgColor', bg)}
+                      style={{
+                        width: 22, height: 22, borderRadius: 4, border: '1px solid #3f3f46',
+                        background: bg, cursor: 'pointer',
+                        outline: slide.bgColor === bg ? '2px solid #3b82f6' : 'none',
+                        outlineOffset: 1,
+                      }}
+                    />
+                  ))}
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+        <button
+          onClick={addSlide}
+          style={{ marginTop: 6, width: '100%', padding: '6px', fontSize: 11, background: '#27272a', color: '#e4e4e7', border: '1px solid #3f3f46', borderRadius: 4, cursor: 'pointer' }}
+        >
+          + Add Slide
+        </button>
+      </div>
+    </div>
+  );
+};
+
+/* ---------- Craft config ---------- */
+
+ContentSlider.craft = {
+  displayName: 'Content Slider',
+  props: {
+    slides: defaultSlides,
+    autoplay: true,
+    interval: 5000,
+    showDots: true,
+    showArrows: true,
+    height: '400px',
+    style: {},
+  },
+  rules: {
+    canDrag: () => true,
+    canMoveIn: () => false,
+    canMoveOut: () => true,
+  },
+  related: {
+    settings: ContentSliderSettings,
+  },
+};
+
+/* ---------- HTML export ---------- */
+
+(ContentSlider as any).toHtml = (props: ContentSliderProps, _childrenHtml: string) => {
+  const esc = (s: string) => s.replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
+  const {
+    slides = defaultSlides,
+    autoplay = true,
+    interval = 5000,
+    showDots = true,
+    showArrows = true,
+    height = '400px',
+    style = {},
+  } = props;
+
+  const items = slides.length > 0 ? slides : defaultSlides;
+  const uid = 'cs_' + Math.random().toString(36).slice(2, 8);
+
+  const sectionStyle = cssPropsToString({
+    position: 'relative',
+    width: '100%',
+    height,
+    overflow: 'hidden',
+    ...style,
+  });
+
+  const slidesHtml = items.map((slide, i) => {
+    const hasBgImage = slide.imageSrc;
+    const bgStyle = hasBgImage
+      ? `background-image:url(${esc(slide.imageSrc!)});background-size:cover;background-position:center`
+      : slide.bgColor?.startsWith('linear-gradient')
+        ? `background-image:${slide.bgColor}`
+        : `background-color:${slide.bgColor || '#3b82f6'}`;
+
+    const contentParts: string[] = [];
+    if (slide.heading) {
+      contentParts.push(`<h2 style="font-size:36px;font-weight:700;color:#ffffff;margin-bottom:12px;font-family:Inter,sans-serif;text-shadow:0 2px 8px rgba(0,0,0,0.3)">${esc(slide.heading)}</h2>`);
+    }
+    if (slide.text) {
+      contentParts.push(`<p style="font-size:18px;color:rgba(255,255,255,0.9);margin-bottom:20px;font-family:Inter,sans-serif;text-shadow:0 1px 4px rgba(0,0,0,0.3)">${esc(slide.text)}</p>`);
+    }
+    if (slide.buttonText) {
+      contentParts.push(`<a href="${esc(slide.buttonHref || '#')}" style="display:inline-block;padding:12px 28px;background:#ffffff;color:#18181b;text-decoration:none;border-radius:8px;font-weight:600;font-size:15px;font-family:Inter,sans-serif">${esc(slide.buttonText)}</a>`);
+    }
+
+    const innerHtml = contentParts.length > 0
+      ? `<div style="text-align:center;padding:20px;z-index:1">${contentParts.join('\n      ')}</div>`
+      : '';
+
+    return `<div id="${uid}_s${i}" style="position:absolute;top:0;left:0;width:100%;height:100%;opacity:${i === 0 ? 1 : 0};transition:opacity 0.5s ease-in-out;display:flex;flex-direction:column;align-items:center;justify-content:center;${bgStyle}">
+      ${innerHtml}
+    </div>`;
+  }).join('\n  ');
+
+  const arrowsHtml = showArrows && items.length > 1
+    ? `<button onclick="${uid}_prev()" style="position:absolute;top:50%;left:16px;transform:translateY(-50%);width:40px;height:40px;border-radius:50%;border:none;background:rgba(255,255,255,0.9);color:#18181b;font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:2;box-shadow:0 2px 8px rgba(0,0,0,0.15)"><i class="fa fa-chevron-left"></i></button>
+  <button onclick="${uid}_next()" style="position:absolute;top:50%;right:16px;transform:translateY(-50%);width:40px;height:40px;border-radius:50%;border:none;background:rgba(255,255,255,0.9);color:#18181b;font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:2;box-shadow:0 2px 8px rgba(0,0,0,0.15)"><i class="fa fa-chevron-right"></i></button>`
+    : '';
+
+  const dotsHtml = showDots && items.length > 1
+    ? `<div style="position:absolute;bottom:16px;left:50%;transform:translateX(-50%);display:flex;gap:8px;z-index:2">
+    ${items.map((_, i) => `<button onclick="${uid}_go(${i})" id="${uid}_d${i}" style="width:10px;height:10px;border-radius:50%;border:none;cursor:pointer;background-color:${i === 0 ? '#ffffff' : 'rgba(255,255,255,0.5)'};transition:background-color 0.3s"></button>`).join('\n    ')}
+  </div>`
+    : '';
+
+  return {
+    html: `<section${sectionStyle ? ` style="${sectionStyle}"` : ''}>
+  ${slidesHtml}
+  ${arrowsHtml}
+  ${dotsHtml}
+  <script>
+  (function(){
+    var current=0, total=${items.length}, uid="${uid}";
+    function show(idx){
+      document.getElementById(uid+"_s"+current).style.opacity="0";
+      ${showDots ? `document.getElementById(uid+"_d"+current).style.backgroundColor="rgba(255,255,255,0.5)";` : ''}
+      current=((idx%total)+total)%total;
+      document.getElementById(uid+"_s"+current).style.opacity="1";
+      ${showDots ? `document.getElementById(uid+"_d"+current).style.backgroundColor="#ffffff";` : ''}
+    }
+    window["${uid}_go"]=show;
+    window["${uid}_next"]=function(){show(current+1);};
+    window["${uid}_prev"]=function(){show(current-1);};
+    ${autoplay && items.length > 1 ? `setInterval(function(){show(current+1);},${interval});` : ''}
+  })();
+  </script>
+</section>`,
+  };
+};