site-builder/craft/src/components/forms/InputField.tsx

import React, { CSSProperties } from 'react';
import { useNode, UserComponent } from '@craftjs/core';
import { cssPropsToString } from '../../utils/style-helpers';
import { escapeHtml, escapeAttr, scopeId, sanitizeInputType } from '../../utils/escape';

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>
  );
};

/* ---------- 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,
  },
};

/* ---------- HTML export ---------- */

(InputField as any).toHtml = (props: InputFieldProps, _childrenHtml: string, nodeId?: string) => {
  const wrapStyle = cssPropsToString({
    display: 'flex',
    flexDirection: 'column',
    gap: '4px',
    ...props.style,
  });
  const reqAttr = props.required ? ' required' : '';
  // Deterministic AND unique id: scoped on the Craft node id so the
  // <label for> always matches the <input id> AND two InputField instances
  // that share the same (often default) `name` -- e.g. two untouched
  // "Input" blocks both named "name" -- don't collide on `field-name` and
  // clobber each other's for/id wiring. Falls back to the old name-derived
  // hash for legacy 2-arg call sites without a node id.
  const fieldId = scopeId(nodeId, props.name || 'field', 'field');
  const labelHtml = props.label
    ? `<label for="${escapeAttr(fieldId)}" style="font-size:14px;font-weight:500;color:#18181b">${escapeHtml(props.label)}${props.required ? '<span style="color:#ef4444"> *</span>' : ''}</label>`
    : '';
  const ariaLabelAttr = !props.label
    ? ` aria-label="${escapeAttr(props.placeholder || props.name || 'Input field')}"`
    : '';
  return {
    html: `<div${wrapStyle ? ` style="${wrapStyle}"` : ''}>
  ${labelHtml}
  <input id="${escapeAttr(fieldId)}" type="${sanitizeInputType(props.type)}" name="${escapeAttr(props.name || 'field')}" placeholder="${escapeAttr(props.placeholder || '')}"${reqAttr}${ariaLabelAttr} 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>`,
  };
};