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,185 @@
+import React, { CSSProperties } from 'react';
+import { useNode, UserComponent } from '@craftjs/core';
+import { cssPropsToString } from '../../utils/style-helpers';
+
+interface InputFieldProps {
+  label?: string;
+  type?: 'text' | 'email' | 'password' | 'number' | 'tel' | 'url';
+  name?: string;
+  placeholder?: string;
+  required?: boolean;
+  style?: CSSProperties;
+}
+
+export const InputField: UserComponent<InputFieldProps> = ({
+  label = 'Label',
+  type = 'text',
+  name = 'field',
+  placeholder = '',
+  required = false,
+  style = {},
+}) => {
+  const {
+    connectors: { connect, drag },
+    selected,
+  } = useNode((node) => ({
+    selected: node.events.selected,
+  }));
+
+  return (
+    <div
+      ref={(ref: HTMLElement | null): void => { if (ref) connect(drag(ref)); }}
+      style={{
+        display: 'flex',
+        flexDirection: 'column',
+        gap: '4px',
+        outline: selected ? '2px solid #3b82f6' : 'none',
+        borderRadius: '4px',
+        ...style,
+      }}
+    >
+      {label && (
+        <label style={{ fontSize: '14px', fontWeight: '500', color: '#18181b' }}>
+          {label}{required && <span style={{ color: '#ef4444' }}> *</span>}
+        </label>
+      )}
+      <input
+        type={type}
+        name={name}
+        placeholder={placeholder}
+        required={required}
+        style={{
+          padding: '10px 12px',
+          border: '1px solid #d4d4d8',
+          borderRadius: '6px',
+          fontSize: '14px',
+          color: '#18181b',
+          backgroundColor: '#ffffff',
+          outline: 'none',
+          width: '100%',
+          boxSizing: 'border-box',
+        }}
+        readOnly
+      />
+    </div>
+  );
+};
+
+/* ---------- Settings panel ---------- */
+
+const InputFieldSettings: React.FC = () => {
+  const { actions: { setProp }, props } = useNode((node) => ({
+    props: node.data.props as InputFieldProps,
+  }));
+
+  const typeOptions: InputFieldProps['type'][] = ['text', 'email', 'password', 'number', 'tel', 'url'];
+
+  return (
+    <div style={{ padding: '12px', display: 'flex', flexDirection: 'column', gap: '14px' }}>
+      <div>
+        <label style={{ fontSize: 11, color: '#a1a1aa', display: 'block', marginBottom: 6 }}>Label</label>
+        <input
+          type="text"
+          value={props.label || ''}
+          onChange={(e) => setProp((p: InputFieldProps) => { p.label = e.target.value; })}
+          style={{ width: '100%', padding: '4px 8px', background: '#27272a', color: '#e4e4e7', border: '1px solid #3f3f46', borderRadius: 4, fontSize: 12 }}
+        />
+      </div>
+
+      <div>
+        <label style={{ fontSize: 11, color: '#a1a1aa', display: 'block', marginBottom: 6 }}>Type</label>
+        <div style={{ display: 'flex', gap: 4, flexWrap: 'wrap' }}>
+          {typeOptions.map((t) => (
+            <button
+              key={t}
+              onClick={() => setProp((p: InputFieldProps) => { p.type = t; })}
+              style={{
+                padding: '3px 8px', fontSize: 11, borderRadius: 4, cursor: 'pointer',
+                border: '1px solid #3f3f46',
+                background: props.type === t ? '#3b82f6' : '#27272a',
+                color: '#e4e4e7',
+              }}
+            >
+              {t}
+            </button>
+          ))}
+        </div>
+      </div>
+
+      <div>
+        <label style={{ fontSize: 11, color: '#a1a1aa', display: 'block', marginBottom: 6 }}>Name</label>
+        <input
+          type="text"
+          value={props.name || ''}
+          onChange={(e) => setProp((p: InputFieldProps) => { p.name = e.target.value; })}
+          style={{ width: '100%', padding: '4px 8px', background: '#27272a', color: '#e4e4e7', border: '1px solid #3f3f46', borderRadius: 4, fontSize: 12 }}
+        />
+      </div>
+
+      <div>
+        <label style={{ fontSize: 11, color: '#a1a1aa', display: 'block', marginBottom: 6 }}>Placeholder</label>
+        <input
+          type="text"
+          value={props.placeholder || ''}
+          onChange={(e) => setProp((p: InputFieldProps) => { p.placeholder = e.target.value; })}
+          style={{ width: '100%', padding: '4px 8px', background: '#27272a', color: '#e4e4e7', border: '1px solid #3f3f46', borderRadius: 4, fontSize: 12 }}
+        />
+      </div>
+
+      <div>
+        <label style={{ fontSize: 10, color: '#a1a1aa', display: 'flex', alignItems: 'center', gap: 6 }}>
+          <input
+            type="checkbox"
+            checked={!!props.required}
+            onChange={(e) => setProp((p: InputFieldProps) => { p.required = e.target.checked; })}
+          />
+          Required
+        </label>
+      </div>
+    </div>
+  );
+};
+
+/* ---------- Craft config ---------- */
+
+InputField.craft = {
+  displayName: 'Input',
+  props: {
+    label: 'Your Name',
+    type: 'text',
+    name: 'name',
+    placeholder: 'Enter your name',
+    required: false,
+    style: {},
+  },
+  rules: {
+    canDrag: () => true,
+    canMoveIn: () => false,
+    canMoveOut: () => true,
+  },
+  related: {
+    settings: InputFieldSettings,
+  },
+};
+
+/* ---------- HTML export ---------- */
+
+(InputField as any).toHtml = (props: InputFieldProps, _childrenHtml: string) => {
+  const esc = (s: string) => s.replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
+  const wrapStyle = cssPropsToString({
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '4px',
+    ...props.style,
+  });
+  const reqAttr = props.required ? ' required' : '';
+  const labelHtml = props.label
+    ? `<label style="font-size:14px;font-weight:500;color:#18181b">${esc(props.label)}${props.required ? '<span style="color:#ef4444"> *</span>' : ''}</label>`
+    : '';
+  return {
+    html: `<div${wrapStyle ? ` style="${wrapStyle}"` : ''}>
+  ${labelHtml}
+  <input type="${props.type || 'text'}" name="${esc(props.name || 'field')}" placeholder="${esc(props.placeholder || '')}"${reqAttr} style="padding:10px 12px;border:1px solid #d4d4d8;border-radius:6px;font-size:14px;color:#18181b;background-color:#ffffff;width:100%;box-sizing:border-box" />
+</div>`,
+  };
+};