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,80 @@
+import React, { useCallback, CSSProperties } from 'react';
+import { useEditor } from '@craftjs/core';
+import {
+  BG_COLORS,
+  SPACING_PRESETS,
+  RADIUS_PRESETS,
+} from '../../../constants/presets';
+import {
+  StylePanelProps,
+  SectionLabel,
+  ColorSwatchGrid,
+  GradientSwatchGrid,
+  PresetButtonGrid,
+} from './shared';
+
+/* ---------- CONTAINER / SECTION ---------- */
+export const ContainerStylePanel: React.FC<StylePanelProps> = ({ selectedId, nodeProps }) => {
+  const { actions } = useEditor();
+  const style: CSSProperties = nodeProps.style || {};
+
+  const setPropStyle = useCallback(
+    (property: string, value: string) => {
+      actions.setProp(selectedId, (props: any) => {
+        props.style = { ...props.style, [property]: value };
+      });
+    },
+    [actions, selectedId],
+  );
+
+  return (
+    <>
+      <div className="guided-section">
+        <SectionLabel>Background Color</SectionLabel>
+        <ColorSwatchGrid
+          colors={BG_COLORS}
+          activeValue={style.backgroundColor as string}
+          onSelect={(v) => setPropStyle('backgroundColor', v)}
+        />
+      </div>
+      <div className="guided-section">
+        <SectionLabel>Background Gradient</SectionLabel>
+        <GradientSwatchGrid
+          activeValue={style.background as string}
+          onSelect={(v) => setPropStyle('background', v)}
+        />
+      </div>
+      <div className="guided-section">
+        <SectionLabel>Padding</SectionLabel>
+        <PresetButtonGrid
+          presets={SPACING_PRESETS}
+          activeValue={style.padding as string}
+          onSelect={(v) => setPropStyle('padding', v)}
+        />
+      </div>
+      <div className="guided-section">
+        <SectionLabel>Border Radius</SectionLabel>
+        <PresetButtonGrid
+          presets={RADIUS_PRESETS}
+          activeValue={style.borderRadius as string}
+          onSelect={(v) => setPropStyle('borderRadius', v)}
+        />
+      </div>
+      <div className="guided-section">
+        <SectionLabel>Alignment</SectionLabel>
+        <div className="preset-grid align-grid">
+          {(['left', 'center', 'right', 'justify'] as const).map((a) => (
+            <button
+              key={a}
+              className={`preset-btn ${style.textAlign === a ? 'active' : ''}`}
+              onClick={() => setPropStyle('textAlign', a)}
+              title={a}
+            >
+              <i className={`fa fa-align-${a}`} />
+            </button>
+          ))}
+        </div>
+      </div>
+    </>
+  );
+};