@runtypelabs/react-flow 0.1.0

package/src/components/nodes/BaseNode.tsx

@@ -0,0 +1,357 @@
+import React, { memo } from 'react'
+import { Handle, Position } from '@xyflow/react'
+import type { RuntypeNodeData, FlowStep } from '../../types'
+
+// ============================================================================
+// Types
+// ============================================================================
+
+export interface BaseNodeProps {
+  /** Node data containing the step */
+  data: RuntypeNodeData
+  /** Whether the node is selected */
+  selected?: boolean
+  /** Node ID */
+  id: string
+  /** Node type label */
+  typeLabel: string
+  /** Icon component to display */
+  icon: React.ReactNode
+  /** Header color (Tailwind class or CSS color) */
+  headerColor?: string
+  /** Whether to show source handle */
+  showSourceHandle?: boolean
+  /** Whether to show target handle */
+  showTargetHandle?: boolean
+  /** Additional source handles for conditional branches */
+  additionalSourceHandles?: Array<{
+    id: string
+    position: Position
+    label?: string
+    color?: string
+    style?: React.CSSProperties
+  }>
+  /** Children to render in the node body */
+  children: React.ReactNode
+}
+
+// ============================================================================
+// Styles
+// ============================================================================
+
+const styles = {
+  container: (selected: boolean) => ({
+    minWidth: '280px',
+    maxWidth: '320px',
+    backgroundColor: '#ffffff',
+    borderRadius: '12px',
+    border: selected ? '2px solid #6366f1' : '1px solid #e5e7eb',
+    boxShadow: selected
+      ? '0 0 0 2px rgba(99, 102, 241, 0.2), 0 4px 6px -1px rgba(0, 0, 0, 0.1)'
+      : '0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)',
+    overflow: 'hidden',
+    transition: 'border-color 0.15s ease, box-shadow 0.15s ease',
+  }),
+  header: (color: string) => ({
+    display: 'flex',
+    alignItems: 'center',
+    gap: '8px',
+    padding: '10px 12px',
+    backgroundColor: color,
+    borderBottom: '1px solid rgba(0, 0, 0, 0.05)',
+  }),
+  iconWrapper: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    width: '28px',
+    height: '28px',
+    borderRadius: '6px',
+    backgroundColor: 'rgba(255, 255, 255, 0.9)',
+    color: '#374151',
+  },
+  headerContent: {
+    flex: 1,
+    minWidth: 0,
+  },
+  typeLabel: {
+    fontSize: '10px',
+    fontWeight: 600,
+    textTransform: 'uppercase' as const,
+    letterSpacing: '0.05em',
+    color: 'rgba(0, 0, 0, 0.5)',
+    marginBottom: '2px',
+  },
+  stepName: {
+    fontSize: '13px',
+    fontWeight: 600,
+    color: '#1f2937',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap' as const,
+  },
+  body: {
+    padding: '12px',
+  },
+  handle: {
+    width: '12px',
+    height: '12px',
+    borderRadius: '50%',
+    border: '2px solid #ffffff',
+  },
+  targetHandle: {
+    backgroundColor: '#6366f1',
+  },
+  sourceHandle: {
+    backgroundColor: '#10b981',
+  },
+  deleteButton: {
+    padding: '4px',
+    borderRadius: '4px',
+    backgroundColor: 'transparent',
+    border: 'none',
+    cursor: 'pointer',
+    color: '#9ca3af',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    transition: 'color 0.15s ease, background-color 0.15s ease',
+  },
+  enabledBadge: (enabled: boolean) => ({
+    display: 'inline-flex',
+    alignItems: 'center',
+    padding: '2px 6px',
+    borderRadius: '4px',
+    fontSize: '10px',
+    fontWeight: 500,
+    backgroundColor: enabled ? 'rgba(16, 185, 129, 0.1)' : 'rgba(239, 68, 68, 0.1)',
+    color: enabled ? '#059669' : '#dc2626',
+  }),
+}
+
+// ============================================================================
+// Header Color Presets
+// ============================================================================
+
+export const NODE_HEADER_COLORS: Record<string, string> = {
+  prompt: '#f3e8ff',       // Purple tint
+  'fetch-url': '#dbeafe',  // Blue tint
+  'transform-data': '#fef3c7', // Amber tint
+  conditional: '#fce7f3',  // Pink tint
+  'send-email': '#d1fae5', // Green tint
+  default: '#f3f4f6',      // Gray tint
+}
+
+// ============================================================================
+// Base Node Component
+// ============================================================================
+
+export const BaseNode = memo(function BaseNode({
+  data,
+  selected = false,
+  id,
+  typeLabel,
+  icon,
+  headerColor,
+  showSourceHandle = true,
+  showTargetHandle = true,
+  additionalSourceHandles,
+  children,
+}: BaseNodeProps) {
+  const { step, onChange, onDelete } = data
+  const color = headerColor || NODE_HEADER_COLORS[step.type] || NODE_HEADER_COLORS.default
+
+  const handleDelete = (e: React.MouseEvent) => {
+    e.stopPropagation()
+    onDelete?.(id)
+  }
+
+  return (
+    <div style={styles.container(selected)}>
+      {/* Target Handle (input) - on left for horizontal flow */}
+      {showTargetHandle && (
+        <Handle
+          type="target"
+          position={Position.Left}
+          style={{ ...styles.handle, ...styles.targetHandle }}
+        />
+      )}
+
+      {/* Header */}
+      <div style={styles.header(color)}>
+        <div style={styles.iconWrapper}>{icon}</div>
+        <div style={styles.headerContent}>
+          <div style={styles.typeLabel}>{typeLabel}</div>
+          <div style={styles.stepName} title={step.name}>
+            {step.name || 'Untitled Step'}
+          </div>
+        </div>
+        <div style={{ display: 'flex', alignItems: 'center', gap: '4px' }}>
+          <span style={styles.enabledBadge(step.enabled)}>
+            {step.enabled ? 'Active' : 'Disabled'}
+          </span>
+          {onDelete && (
+            <button
+              style={styles.deleteButton}
+              onClick={handleDelete}
+              title="Delete step"
+              onMouseEnter={(e) => {
+                e.currentTarget.style.backgroundColor = 'rgba(239, 68, 68, 0.1)'
+                e.currentTarget.style.color = '#dc2626'
+              }}
+              onMouseLeave={(e) => {
+                e.currentTarget.style.backgroundColor = 'transparent'
+                e.currentTarget.style.color = '#9ca3af'
+              }}
+            >
+              <DeleteIcon />
+            </button>
+          )}
+        </div>
+      </div>
+
+      {/* Body - nodrag class prevents React Flow from intercepting events */}
+      <div style={styles.body} className="nodrag">{children}</div>
+
+      {/* Source Handle (output) - on right for horizontal flow */}
+      {showSourceHandle && (
+        <Handle
+          type="source"
+          position={Position.Right}
+          id="output"
+          style={{ ...styles.handle, ...styles.sourceHandle }}
+        />
+      )}
+
+      {/* Additional source handles for conditional branches */}
+      {additionalSourceHandles?.map((handle) => (
+        <Handle
+          key={handle.id}
+          type="source"
+          position={handle.position}
+          id={handle.id}
+          style={{
+            ...styles.handle,
+            backgroundColor: handle.color || '#10b981',
+            ...handle.style,
+          }}
+        />
+      ))}
+    </div>
+  )
+})
+
+// ============================================================================
+// Icon Components
+// ============================================================================
+
+const DeleteIcon = () => (
+  <svg
+    width="14"
+    height="14"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+  >
+    <path d="M3 6h18" />
+    <path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6" />
+    <path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2" />
+  </svg>
+)
+
+// Export common icons for use in step nodes
+export const BrainIcon = () => (
+  <svg
+    width="16"
+    height="16"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+  >
+    <path d="M12 5a3 3 0 1 0-5.997.125 4 4 0 0 0-2.526 5.77 4 4 0 0 0 .556 6.588A4 4 0 1 0 12 18Z" />
+    <path d="M12 5a3 3 0 1 1 5.997.125 4 4 0 0 1 2.526 5.77 4 4 0 0 1-.556 6.588A4 4 0 1 1 12 18Z" />
+    <path d="M15 13a4.5 4.5 0 0 1-3-4 4.5 4.5 0 0 1-3 4" />
+    <path d="M17.599 6.5a3 3 0 0 0 .399-1.375" />
+    <path d="M6.003 5.125A3 3 0 0 0 6.401 6.5" />
+    <path d="M3.477 10.896a4 4 0 0 1 .585-.396" />
+    <path d="M19.938 10.5a4 4 0 0 1 .585.396" />
+    <path d="M6 18a4 4 0 0 1-1.967-.516" />
+    <path d="M19.967 17.484A4 4 0 0 1 18 18" />
+  </svg>
+)
+
+export const GlobeIcon = () => (
+  <svg
+    width="16"
+    height="16"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+  >
+    <circle cx="12" cy="12" r="10" />
+    <path d="M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20" />
+    <path d="M2 12h20" />
+  </svg>
+)
+
+export const CodeIcon = () => (
+  <svg
+    width="16"
+    height="16"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+  >
+    <polyline points="16 18 22 12 16 6" />
+    <polyline points="8 6 2 12 8 18" />
+  </svg>
+)
+
+export const GitBranchIcon = () => (
+  <svg
+    width="16"
+    height="16"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+  >
+    <line x1="6" y1="3" x2="6" y2="15" />
+    <circle cx="18" cy="6" r="3" />
+    <circle cx="6" cy="18" r="3" />
+    <path d="M18 9a9 9 0 0 1-9 9" />
+  </svg>
+)
+
+export const MailIcon = () => (
+  <svg
+    width="16"
+    height="16"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+  >
+    <rect width="20" height="16" x="2" y="4" rx="2" />
+    <path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7" />
+  </svg>
+)
+
+export default BaseNode
+

package/src/components/nodes/CodeNode.tsx

@@ -0,0 +1,252 @@
+import React, { memo, useCallback, useState } from 'react'
+import type { NodeProps } from '@xyflow/react'
+import { BaseNode, CodeIcon, NODE_HEADER_COLORS } from './BaseNode'
+import type { RuntypeNodeData, TransformDataStepConfig, FlowStep } from '../../types'
+
+// ============================================================================
+// Styles
+// ============================================================================
+
+const styles = {
+  field: {
+    marginBottom: '12px',
+  },
+  label: {
+    display: 'block',
+    fontSize: '11px',
+    fontWeight: 600,
+    color: '#6b7280',
+    marginBottom: '4px',
+    textTransform: 'uppercase' as const,
+    letterSpacing: '0.03em',
+  },
+  input: {
+    width: '100%',
+    padding: '8px 10px',
+    fontSize: '12px',
+    border: '1px solid #e5e7eb',
+    borderRadius: '6px',
+    backgroundColor: '#f9fafb',
+    color: '#1f2937',
+    outline: 'none',
+    transition: 'border-color 0.15s ease, box-shadow 0.15s ease',
+  },
+  codeArea: {
+    width: '100%',
+    padding: '10px',
+    fontSize: '11px',
+    border: '1px solid #e5e7eb',
+    borderRadius: '6px',
+    backgroundColor: '#1e1e1e',
+    color: '#d4d4d4',
+    outline: 'none',
+    resize: 'vertical' as const,
+    minHeight: '100px',
+    fontFamily: '"Fira Code", "Monaco", "Consolas", monospace',
+    lineHeight: 1.5,
+    tabSize: 2,
+  },
+  select: {
+    width: '100%',
+    padding: '8px 10px',
+    fontSize: '12px',
+    border: '1px solid #e5e7eb',
+    borderRadius: '6px',
+    backgroundColor: '#f9fafb',
+    color: '#1f2937',
+    outline: 'none',
+    cursor: 'pointer',
+  },
+  row: {
+    display: 'flex',
+    gap: '8px',
+  },
+  languageBadge: (language: string) => {
+    const colors: Record<string, { bg: string; text: string }> = {
+      javascript: { bg: '#fef3c7', text: '#d97706' },
+      typescript: { bg: '#dbeafe', text: '#1d4ed8' },
+      python: { bg: '#d1fae5', text: '#059669' },
+    }
+    const color = colors[language] || colors.javascript
+    return {
+      display: 'inline-flex',
+      alignItems: 'center',
+      padding: '2px 8px',
+      borderRadius: '4px',
+      fontSize: '10px',
+      fontWeight: 600,
+      backgroundColor: color.bg,
+      color: color.text,
+      textTransform: 'capitalize' as const,
+    }
+  },
+  lineNumbers: {
+    display: 'flex',
+    flexDirection: 'column' as const,
+    alignItems: 'flex-end',
+    paddingRight: '8px',
+    marginRight: '8px',
+    borderRight: '1px solid #3f3f46',
+    color: '#6b7280',
+    fontSize: '11px',
+    fontFamily: '"Fira Code", "Monaco", "Consolas", monospace',
+    lineHeight: 1.5,
+    userSelect: 'none' as const,
+  },
+  codePreview: {
+    fontSize: '10px',
+    color: '#9ca3af',
+    marginTop: '4px',
+  },
+}
+
+// ============================================================================
+// Code Node Component
+// ============================================================================
+
+export const CodeNode = memo(function CodeNode(props: NodeProps) {
+  const { data, selected, id } = props as NodeProps & { data: RuntypeNodeData }
+  const { step, onChange } = data
+  const config = step.config as TransformDataStepConfig
+  
+  const [isExpanded, setIsExpanded] = useState(false)
+
+  const handleChange = useCallback(
+    (field: keyof TransformDataStepConfig, value: unknown) => {
+      onChange?.(id, {
+        config: {
+          ...config,
+          [field]: value,
+        },
+      } as Partial<FlowStep>)
+    },
+    [id, config, onChange]
+  )
+
+  const handleNameChange = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      onChange?.(id, { name: e.target.value })
+    },
+    [id, onChange]
+  )
+
+  const language = config.language || 'javascript'
+  const lineCount = (config.script || '').split('\n').length
+
+  return (
+    <BaseNode
+      data={data}
+      selected={selected}
+      id={id}
+      typeLabel="Run Code"
+      icon={<CodeIcon />}
+      headerColor={NODE_HEADER_COLORS['transform-data']}
+    >
+      <div style={styles.field}>
+        <label style={styles.label}>Step Name</label>
+        <input
+          style={styles.input}
+          value={step.name}
+          onChange={handleNameChange}
+          placeholder="Enter step name"
+          onKeyDown={(e) => e.stopPropagation()}
+        />
+      </div>
+
+      <div style={styles.field}>
+        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '4px' }}>
+          <label style={styles.label}>Code</label>
+          <span style={styles.languageBadge(language)}>{language}</span>
+        </div>
+        <textarea
+          style={styles.codeArea}
+          value={config.script || ''}
+          onChange={(e) => handleChange('script', e.target.value)}
+          placeholder={`// Write your ${language} code here\nreturn { result: input }`}
+          spellCheck={false}
+          onKeyDown={(e) => e.stopPropagation()}
+        />
+        <div style={styles.codePreview}>
+          {lineCount} line{lineCount !== 1 ? 's' : ''}
+        </div>
+      </div>
+
+      {isExpanded && (
+        <>
+          <div style={styles.row}>
+            <div style={{ ...styles.field, flex: 1 }}>
+              <label style={styles.label}>Language</label>
+              <select
+                style={styles.select}
+                value={language}
+                onChange={(e) => handleChange('language', e.target.value)}
+                onKeyDown={(e) => e.stopPropagation()}
+              >
+                <option value="javascript">JavaScript</option>
+                <option value="typescript">TypeScript</option>
+                <option value="python">Python</option>
+              </select>
+            </div>
+            <div style={{ ...styles.field, flex: 1 }}>
+              <label style={styles.label}>Sandbox</label>
+              <select
+                style={styles.select}
+                value={config.sandboxProvider || 'quickjs'}
+                onChange={(e) => handleChange('sandboxProvider', e.target.value)}
+                onKeyDown={(e) => e.stopPropagation()}
+              >
+                <option value="quickjs">QuickJS (Fast)</option>
+                <option value="daytona">Daytona (Full)</option>
+              </select>
+            </div>
+          </div>
+
+          <div style={styles.field}>
+            <label style={styles.label}>On Error</label>
+            <select
+              style={styles.select}
+              value={config.errorHandling || 'fail'}
+              onChange={(e) => handleChange('errorHandling', e.target.value)}
+              onKeyDown={(e) => e.stopPropagation()}
+            >
+              <option value="fail">Fail</option>
+              <option value="continue">Continue</option>
+              <option value="default">Use Default</option>
+            </select>
+          </div>
+
+          <div style={styles.field}>
+            <label style={styles.label}>Output Variable</label>
+            <input
+              style={styles.input}
+              value={config.outputVariable || ''}
+              onChange={(e) => handleChange('outputVariable', e.target.value)}
+              placeholder="transform_result"
+              onKeyDown={(e) => e.stopPropagation()}
+            />
+          </div>
+        </>
+      )}
+
+      <button
+        onClick={() => setIsExpanded(!isExpanded)}
+        style={{
+          width: '100%',
+          padding: '6px',
+          fontSize: '11px',
+          color: '#6366f1',
+          backgroundColor: 'transparent',
+          border: '1px dashed #e5e7eb',
+          borderRadius: '6px',
+          cursor: 'pointer',
+          marginTop: '4px',
+        }}
+      >
+        {isExpanded ? 'Show Less' : 'Show More Options'}
+      </button>
+    </BaseNode>
+  )
+})
+
+export default CodeNode
+