elementdrawing 1.0.0

package/src/jsx/components/Form.jsx

@@ -0,0 +1,274 @@
+/**
+ * Form Component for ElementDrawing Framework
+ * Supports validation, field groups, inline/stacked layouts, form items, labels, errors, help text, disabled, loading
+ */
+const ED = require('../core/element');
+
+function FormItem(props) {
+  const {
+    children,
+    label,
+    labelFor,
+    labelAlign = 'left',
+    labelWidth,
+    required = false,
+    error,
+    warning,
+    success,
+    helpText,
+    className = '',
+    style = {},
+    layout = 'vertical',
+    colon = false,
+    tooltip,
+    extra,
+    noStyle = false,
+    hidden = false,
+  } = props;
+
+  if (hidden) return children;
+
+  const validationState = error ? 'error' : warning ? 'warning' : success ? 'success' : 'default';
+
+  const labelClasses = [
+    'ed-block ed-text-sm ed-font-medium ed-mb-1',
+    labelAlign === 'right' ? 'ed-text-right' : labelAlign === 'center' ? 'ed-text-center' : '',
+    required ? "ed-after:content-['*'] ed-after:ed-text-red-500 ed-after:ed-ml-0.5" : '',
+    error ? 'ed-text-red-600' : 'ed-text-gray-700',
+    layout === 'horizontal' ? 'ed-mb-0 ed-flex ed-items-center' : '',
+  ].filter(Boolean).join(' ');
+
+  const labelElement = label
+    ? ED.createElement('label', {
+        htmlFor: labelFor,
+        className: labelClasses,
+        style: layout === 'horizontal' ? { width: labelWidth || 120, flexShrink: 0 } : {},
+        children: [
+          ED.createElement('span', null, label),
+          colon ? ED.createElement('span', { key: 'colon' }, ':') : null,
+          tooltip
+            ? ED.createElement('span', {
+                key: 'tooltip',
+                className: 'ed-ml-1 ed-inline-flex ed-items-center',
+                title: typeof tooltip === 'string' ? tooltip : undefined,
+                children: ED.createElement('svg', {
+                  className: 'ed-w-4 ed-h-4 ed-text-gray-400',
+                  fill: 'none', viewBox: '0 0 24 24', stroke: 'currentColor',
+                  children: ED.createElement('path', { strokeLinecap: 'round', strokeLinejoin: 'round', strokeWidth: 2, d: 'M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z' }),
+                }),
+              })
+            : null,
+        ],
+      })
+    : null;
+
+  const messageElement = error
+    ? ED.createElement('p', { className: 'ed-text-xs ed-text-red-500 ed-mt-1 ed-flex ed-items-center ed-gap-1' },
+        ED.createElement('svg', { className: 'ed-w-3.5 ed-h-3.5 ed-flex-shrink-0', fill: 'none', viewBox: '0 0 24 24', stroke: 'currentColor' },
+          ED.createElement('path', { strokeLinecap: 'round', strokeLinejoin: 'round', strokeWidth: 2, d: 'M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z' })
+        ),
+        error
+      )
+    : warning
+      ? ED.createElement('p', { className: 'ed-text-xs ed-text-yellow-500 ed-mt-1' }, warning)
+      : success
+        ? ED.createElement('p', { className: 'ed-text-xs ed-text-green-500 ed-mt-1' }, success)
+        : helpText
+          ? ED.createElement('p', { className: 'ed-text-xs ed-text-gray-500 ed-mt-1' }, helpText)
+          : null;
+
+  const extraElement = extra
+    ? ED.createElement('div', { className: 'ed-text-xs ed-text-gray-400 ed-mt-1' }, extra)
+    : null;
+
+  if (noStyle) {
+    return ED.createElement('div', { className, style, children });
+  }
+
+  if (layout === 'horizontal') {
+    return ED.createElement('div', {
+      className: `ed-flex ed-gap-4 ed-mb-4 ${className}`,
+      style,
+      children: [
+        labelElement,
+        ED.createElement('div', { className: 'ed-flex-1 ed-min-w-0', key: 'control' },
+          children,
+          messageElement,
+          extraElement,
+        ),
+      ],
+    });
+  }
+
+  if (layout === 'inline') {
+    return ED.createElement('div', {
+      className: `ed-inline-flex ed-items-center ed-gap-2 ed-mr-4 ${className}`,
+      style,
+      children: [labelElement, children, messageElement].filter(Boolean),
+    });
+  }
+
+  return ED.createElement('div', {
+    className: `ed-mb-4 ${className}`,
+    style,
+    children: [labelElement, children, messageElement, extraElement].filter(Boolean),
+  });
+}
+
+FormItem.displayName = 'FormItem';
+
+function FormGroup(props) {
+  const {
+    children,
+    title,
+    description,
+    collapsible = false,
+    collapsed: defaultCollapsed = false,
+    className = '',
+    style = {},
+    bordered = true,
+  } = props;
+
+  const groupClasses = [
+    bordered ? 'ed-border ed-border-gray-200 ed-rounded-lg ed-p-4' : '',
+    'ed-mb-6',
+    className,
+  ].filter(Boolean).join(' ');
+
+  return ED.createElement('fieldset', {
+    className: groupClasses,
+    style,
+    children: [
+      title
+        ? ED.createElement('legend', {
+            className: 'ed-text-sm ed-font-semibold ed-text-gray-700 ed-px-2',
+          }, title)
+        : null,
+      description
+        ? ED.createElement('p', { className: 'ed-text-xs ed-text-gray-500 ed-mb-3' }, description)
+        : null,
+      children,
+    ].filter(Boolean),
+  });
+}
+
+FormGroup.displayName = 'FormGroup';
+
+function Form(props) {
+  const {
+    children,
+    layout = 'vertical',
+    labelAlign = 'left',
+    labelWidth = 120,
+    colon = false,
+    requiredMark = true,
+    disabled = false,
+    loading = false,
+    className = '',
+    style = {},
+    onSubmit,
+    onValuesChange,
+    initialValues,
+    validateMessages,
+    size = 'md',
+    bordered = false,
+    name,
+    action,
+    method,
+    footer,
+    showReset = false,
+    resetText = 'Reset',
+    submitText = 'Submit',
+    onReset,
+  } = props;
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    onSubmit?.(e);
+  };
+
+  const handleReset = (e) => {
+    e.preventDefault();
+    onReset?.(e);
+  };
+
+  const sizeClasses = {
+    sm: 'ed-text-sm',
+    md: 'ed-text-sm',
+    lg: 'ed-text-base',
+  };
+
+  const formClasses = [
+    sizeClasses[size] || sizeClasses.md,
+    layout === 'inline' ? 'ed-flex ed-flex-wrap ed-items-end ed-gap-4' : '',
+    layout === 'horizontal' ? 'ed-space-y-0' : 'ed-space-y-0',
+    bordered ? 'ed-border ed-border-gray-200 ed-rounded-lg ed-p-6' : '',
+    disabled ? 'ed-opacity-60 ed-pointer-events-none' : '',
+    'ed-form',
+    className,
+  ].filter(Boolean).join(' ');
+
+  const loadingOverlay = loading
+    ? ED.createElement('div', {
+        className: 'ed-absolute ed-inset-0 ed-bg-white ed-bg-opacity-70 ed-flex ed-items-center ed-justify-center ed-z-10 ed-rounded-lg',
+        children: ED.createElement('div', {
+          className: 'ed-flex ed-items-center ed-gap-2 ed-text-gray-500',
+          children: [
+            ED.createElement('div', {
+              key: 'spinner',
+              className: 'ed-w-5 ed-h-5 ed-border-2 ed-border-blue-500 ed-border-t-transparent ed-rounded-full ed-animate-spin',
+            }),
+            ED.createElement('span', { key: 'text' }, 'Submitting...'),
+          ],
+        }),
+      })
+    : null;
+
+  const footerElement = footer !== undefined ? footer
+    : (onSubmit || action)
+      ? ED.createElement('div', {
+          className: `ed-flex ed-items-center ed-gap-3 ${layout === 'inline' ? '' : 'ed-mt-6'}`,
+          children: [
+            ED.createElement('button', {
+              key: 'submit',
+              type: 'submit',
+              className: [
+                'ed-px-5 ed-py-2 ed-text-sm ed-font-medium ed-text-white ed-bg-blue-600 ed-rounded-md',
+                'hover:ed-bg-blue-700 focus:ed-ring-2 focus:ed-ring-blue-500 focus:ed-ring-offset-2',
+                'ed-transition-colors ed-duration-200',
+                loading ? 'ed-opacity-70 ed-cursor-not-allowed' : '',
+              ].filter(Boolean).join(' '),
+              disabled: loading,
+            }, submitText),
+            showReset
+              ? ED.createElement('button', {
+                  key: 'reset',
+                  type: 'button',
+                  className: 'ed-px-5 ed-py-2 ed-text-sm ed-font-medium ed-text-gray-700 ed-bg-white ed-border ed-border-gray-300 ed-rounded-md hover:ed-bg-gray-50 ed-transition-colors',
+                  onClick: handleReset,
+                }, resetText)
+              : null,
+          ].filter(Boolean),
+        })
+      : null;
+
+  return ED.createElement('form', {
+    name,
+    action,
+    method,
+    className: formClasses,
+    style: { position: 'relative', ...style },
+    onSubmit: handleSubmit,
+    children: [
+      children,
+      footerElement,
+      loadingOverlay,
+    ].filter(Boolean),
+  });
+}
+
+Form.displayName = 'Form';
+Form.Item = FormItem;
+Form.Group = FormGroup;
+
+module.exports = Form;

package/src/jsx/components/Input.jsx

@@ -0,0 +1,285 @@
+/**
+ * Input Component for ElementDrawing Framework
+ * Supports types, sizes, validation, prefix/suffix icons, clearable, disabled, readonly, floating label
+ */
+const ED = require('../core/element');
+
+const INPUT_SIZES = {
+  xs: 'ed-text-xs ed-px-2 ed-py-1',
+  sm: 'ed-text-sm ed-px-3 ed-py-1.5',
+  md: 'ed-text-sm ed-px-3 ed-py-2',
+  lg: 'ed-text-base ed-px-4 ed-py-2.5',
+  xl: 'ed-text-lg ed-px-4 ed-py-3',
+};
+
+const VALIDATION_STATES = {
+  default: 'ed-border-gray-300 focus:ed-border-blue-500 focus:ed-ring-blue-500',
+  success: 'ed-border-green-500 focus:ed-border-green-600 focus:ed-ring-green-500',
+  warning: 'ed-border-yellow-500 focus:ed-border-yellow-600 focus:ed-ring-yellow-500',
+  error: 'ed-border-red-500 focus:ed-border-red-600 focus:ed-ring-red-500',
+};
+
+const VALIDATION_ICONS = {
+  success: ED.createElement('svg', {
+    className: 'ed-w-5 ed-h-5 ed-text-green-500',
+    fill: 'none', viewBox: '0 0 24 24', stroke: 'currentColor',
+    children: ED.createElement('path', {
+      strokeLinecap: 'round', strokeLinejoin: 'round', strokeWidth: 2,
+      d: 'M5 13l4 4L19 7',
+    }),
+  }),
+  warning: ED.createElement('svg', {
+    className: 'ed-w-5 ed-h-5 ed-text-yellow-500',
+    fill: 'none', viewBox: '0 0 24 24', stroke: 'currentColor',
+    children: ED.createElement('path', {
+      strokeLinecap: 'round', strokeLinejoin: 'round', strokeWidth: 2,
+      d: 'M12 9v2m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z',
+    }),
+  }),
+  error: ED.createElement('svg', {
+    className: 'ed-w-5 ed-h-5 ed-text-red-500',
+    fill: 'none', viewBox: '0 0 24 24', stroke: 'currentColor',
+    children: ED.createElement('path', {
+      strokeLinecap: 'round', strokeLinejoin: 'round', strokeWidth: 2,
+      d: 'M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z',
+    }),
+  }),
+};
+
+function Input(props) {
+  const {
+    type = 'text',
+    size = 'md',
+    variant = 'default',
+    state = 'default',
+    validationState,
+    value,
+    defaultValue,
+    placeholder,
+    prefix,
+    suffix,
+    prefixIcon,
+    suffixIcon,
+    clearable = false,
+    disabled = false,
+    readonly = false,
+    floatingLabel,
+    label,
+    helperText,
+    errorMessage,
+    successMessage,
+    warningMessage,
+    maxLength,
+    showCount = false,
+    allowClear,
+    onClear,
+    onChange,
+    onFocus,
+    onBlur,
+    onInput,
+    onKeyDown,
+    onKeyUp,
+    onKeyPress,
+    onEnter,
+    className = '',
+    style = {},
+    inputClassName = '',
+    inputStyle = {},
+    id,
+    name,
+    autoComplete,
+    autoFocus = false,
+    tabIndex,
+    required = false,
+    pattern,
+    min,
+    max,
+    step,
+    rows,
+    size: sizeProp,
+    width,
+    borderRadius,
+    bordered = true,
+    status,
+  } = props;
+
+  const currentState = status || state || validationState || 'default';
+  const sizeClass = INPUT_SIZES[size] || INPUT_SIZES.md;
+  const stateClass = VALIDATION_STATES[currentState] || VALIDATION_STATES.default;
+  const hasPrefix = prefix || prefixIcon;
+  const hasSuffix = suffix || suffixIcon || clearable || VALIDATION_ICONS[currentState];
+
+  const clearButton = clearable && value && !disabled && !readonly
+    ? ED.createElement('button', {
+        key: 'clear',
+        className: 'ed-flex ed-items-center ed-justify-center ed-text-gray-400 hover:ed-text-gray-600 ed-transition-colors ed-ml-1',
+        onClick: (e) => {
+          e.stopPropagation();
+          onClear?.();
+          onChange?.({ target: { value: '' } });
+        },
+        tabIndex: -1,
+        type: 'button',
+        'aria-label': 'Clear input',
+        children: ED.createElement('svg', {
+          className: 'ed-w-4 ed-h-4',
+          fill: 'none', viewBox: '0 0 24 24', stroke: 'currentColor',
+          children: ED.createElement('path', {
+            strokeLinecap: 'round', strokeLinejoin: 'round', strokeWidth: 2,
+            d: 'M6 18L18 6M6 6l12 12',
+          }),
+        }),
+      })
+    : null;
+
+  const prefixElement = hasPrefix
+    ? ED.createElement('span', {
+        className: 'ed-flex ed-items-center ed-pl-3 ed-text-gray-500 ed-pointer-events-none ed-input-prefix',
+        children: prefixIcon
+          ? (typeof prefixIcon === 'string'
+            ? ED.createElement('i', { className: prefixIcon })
+            : prefixIcon)
+          : prefix,
+      })
+    : null;
+
+  const suffixElement = hasSuffix
+    ? ED.createElement('span', {
+        className: 'ed-flex ed-items-center ed-pr-3 ed-text-gray-500 ed-gap-1 ed-input-suffix',
+        children: [
+          VALIDATION_ICONS[currentState] || null,
+          suffixIcon
+            ? (typeof suffixIcon === 'string'
+              ? ED.createElement('i', { className: suffixIcon })
+              : suffixIcon)
+            : null,
+          suffix || null,
+          clearButton,
+        ].filter(Boolean),
+      })
+    : null;
+
+  const charCount = showCount && maxLength
+    ? ED.createElement('span', {
+        className: `ed-text-xs ed-mt-1 ed-text-right ${value?.length > maxLength ? 'ed-text-red-500' : 'ed-text-gray-400'}`,
+      }, `${value?.length || 0} / ${maxLength}`)
+    : null;
+
+  const messageElement = errorMessage && currentState === 'error'
+    ? ED.createElement('p', { className: 'ed-text-xs ed-text-red-500 ed-mt-1' }, errorMessage)
+    : successMessage && currentState === 'success'
+      ? ED.createElement('p', { className: 'ed-text-xs ed-text-green-500 ed-mt-1' }, successMessage)
+      : warningMessage && currentState === 'warning'
+        ? ED.createElement('p', { className: 'ed-text-xs ed-text-yellow-500 ed-mt-1' }, warningMessage)
+        : helperText
+          ? ED.createElement('p', { className: 'ed-text-xs ed-text-gray-500 ed-mt-1' }, helperText)
+          : null;
+
+  const inputElement = ED.createElement('input', {
+    id,
+    name,
+    type,
+    value,
+    defaultValue,
+    placeholder: floatingLabel ? ' ' : placeholder,
+    disabled,
+    readOnly: readonly,
+    maxLength,
+    autoComplete,
+    autoFocus,
+    tabIndex,
+    required,
+    pattern,
+    min,
+    max,
+    step,
+    className: [
+      'ed-w-full ed-outline-none ed-transition-all ed-duration-200',
+      'ed-bg-transparent',
+      sizeClass,
+      bordered ? stateClass : 'ed-border-none',
+      !hasPrefix ? 'ed-pl-3' : '',
+      !hasSuffix ? 'ed-pr-3' : '',
+      disabled ? 'ed-bg-gray-100 ed-cursor-not-allowed ed-text-gray-400' : '',
+      readonly ? 'ed-bg-gray-50 ed-cursor-default' : '',
+      'focus:ed-ring-2 focus:ed-ring-offset-0',
+      borderRadius ? `ed-rounded-${borderRadius}` : 'ed-rounded-md',
+      floatingLabel ? 'ed-peer ed-placeholder-shown:ed-pt-4 ed-placeholder-shown:ed-pb-1' : '',
+      inputClassName,
+    ].filter(Boolean).join(' '),
+    style: inputStyle,
+    onChange,
+    onFocus,
+    onBlur,
+    onInput,
+    onKeyDown: onEnter
+      ? (e) => { if (e.key === 'Enter') onEnter(e); onKeyDown?.(e); }
+      : onKeyDown,
+    onKeyUp,
+    onKeyPress,
+    'aria-invalid': currentState === 'error',
+    'aria-describedby': errorMessage ? `${id}-error` : undefined,
+  });
+
+  const floatingLabelElement = floatingLabel
+    ? ED.createElement('label', {
+        htmlFor: id,
+        className: [
+          'ed-absolute ed-left-3 ed-transition-all ed-duration-200',
+          'ed-text-gray-500 ed-pointer-events-none',
+          'peer-placeholder-shown:ed-top-2.5 peer-placeholder-shown:ed-text-sm',
+          'peer-focus:ed-top-0.5 peer-focus:ed-text-xs peer-focus:ed-text-blue-500',
+          '-ed-top-0.5 ed-text-xs',
+          'ed-bg-white ed-px-1',
+        ].join(' '),
+      }, floatingLabel)
+    : null;
+
+  const wrapperClasses = [
+    'ed-relative ed-flex ed-items-center',
+    bordered ? 'ed-border ed-rounded-md' : '',
+    disabled ? 'ed-bg-gray-100' : 'ed-bg-white',
+    currentState === 'error' ? 'ed-border-red-500' : currentState === 'success' ? 'ed-border-green-500' : 'ed-border-gray-300',
+    disabled ? 'ed-opacity-60' : '',
+    'hover:ed-border-gray-400',
+    'focus-within:ed-ring-2 focus-within:ed-ring-blue-500 focus-within:ed-border-blue-500',
+    'ed-transition-all ed-duration-200',
+    className,
+  ].filter(Boolean).join(' ');
+
+  return ED.createElement('div', {
+    className: `ed-inline-flex ed-flex-col ${width ? '' : 'ed-w-full'}`,
+    style: { width, ...style },
+    children: [
+      label && !floatingLabel
+        ? ED.createElement('label', {
+            key: 'label',
+            htmlFor: id,
+            className: `ed-block ed-text-sm ed-font-medium ed-mb-1 ${required ? "ed-after:content-['*'] ed-after:ed-text-red-500 ed-after:ed-ml-0.5" : ''} ${disabled ? 'ed-text-gray-400' : 'ed-text-gray-700'}`,
+          }, label)
+        : null,
+      ED.createElement('div', {
+        key: 'input-wrapper',
+        className: wrapperClasses,
+        style: { position: 'relative' },
+        children: [
+          prefixElement,
+          inputElement,
+          floatingLabelElement,
+          suffixElement,
+        ].filter(Boolean),
+      }),
+      ED.createElement('div', {
+        key: 'messages',
+        className: 'ed-flex ed-justify-between',
+        children: [messageElement, charCount].filter(Boolean),
+      }),
+    ].filter(Boolean),
+  });
+}
+
+Input.displayName = 'Input';
+Input.SIZES = INPUT_SIZES;
+Input.STATES = VALIDATION_STATES;
+
+module.exports = Input;