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,81 @@
+import React, { useCallback, CSSProperties } from 'react';
+import { useEditor } from '@craftjs/core';
+import {
+  TEXT_COLORS,
+  FONT_FAMILIES,
+  TEXT_SIZES,
+  FONT_WEIGHTS,
+} from '../../../constants/presets';
+import {
+  StylePanelProps,
+  SectionLabel,
+  ColorSwatchGrid,
+  PresetButtonGrid,
+} from './shared';
+
+/* ---------- TEXT ---------- */
+export const TextStylePanel: 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>Text Color</SectionLabel>
+        <ColorSwatchGrid
+          colors={TEXT_COLORS}
+          activeValue={style.color as string}
+          onSelect={(v) => setPropStyle('color', v)}
+        />
+      </div>
+      <div className="guided-section">
+        <SectionLabel>Font Family</SectionLabel>
+        <PresetButtonGrid
+          presets={FONT_FAMILIES}
+          activeValue={style.fontFamily as string}
+          onSelect={(v) => setPropStyle('fontFamily', v)}
+        />
+      </div>
+      <div className="guided-section">
+        <SectionLabel>Text Size</SectionLabel>
+        <PresetButtonGrid
+          presets={TEXT_SIZES}
+          activeValue={style.fontSize as string}
+          onSelect={(v) => setPropStyle('fontSize', v)}
+        />
+      </div>
+      <div className="guided-section">
+        <SectionLabel>Font Weight</SectionLabel>
+        <PresetButtonGrid
+          presets={FONT_WEIGHTS}
+          activeValue={String(style.fontWeight || '')}
+          onSelect={(v) => setPropStyle('fontWeight', 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>
+    </>
+  );
+};