@runtypelabs/react-flow 0.1.0

package/src/components/nodes/ConditionalNode.tsx

@@ -0,0 +1,264 @@
+import React, { memo, useCallback, useState } from 'react'
+import type { NodeProps } from '@xyflow/react'
+import { Position } from '@xyflow/react'
+import { BaseNode, GitBranchIcon, NODE_HEADER_COLORS } from './BaseNode'
+import type { RuntypeNodeData, ConditionalStepConfig, 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',
+  },
+  conditionArea: {
+    width: '100%',
+    padding: '10px',
+    fontSize: '12px',
+    border: '1px solid #e5e7eb',
+    borderRadius: '6px',
+    backgroundColor: '#fef7ee',
+    color: '#92400e',
+    outline: 'none',
+    resize: 'vertical' as const,
+    minHeight: '60px',
+    fontFamily: '"Fira Code", "Monaco", "Consolas", monospace',
+    lineHeight: 1.5,
+  },
+  branchInfo: {
+    display: 'flex',
+    gap: '12px',
+    marginTop: '8px',
+  },
+  branchCard: (type: 'true' | 'false') => ({
+    flex: 1,
+    padding: '10px',
+    borderRadius: '8px',
+    backgroundColor: type === 'true' ? '#d1fae5' : '#fee2e2',
+    border: `1px solid ${type === 'true' ? '#a7f3d0' : '#fecaca'}`,
+  }),
+  branchLabel: (type: 'true' | 'false') => ({
+    fontSize: '10px',
+    fontWeight: 700,
+    textTransform: 'uppercase' as const,
+    letterSpacing: '0.05em',
+    color: type === 'true' ? '#059669' : '#dc2626',
+    marginBottom: '4px',
+  }),
+  branchCount: {
+    fontSize: '18px',
+    fontWeight: 700,
+    color: '#1f2937',
+  },
+  branchCountLabel: {
+    fontSize: '10px',
+    color: '#6b7280',
+  },
+  helpText: {
+    fontSize: '10px',
+    color: '#9ca3af',
+    marginTop: '4px',
+    fontStyle: 'italic' as const,
+  },
+}
+
+// ============================================================================
+// Conditional Node Component
+// ============================================================================
+
+export const ConditionalNode = memo(function ConditionalNode(props: NodeProps) {
+  const { data, selected, id } = props as NodeProps & { data: RuntypeNodeData }
+  const { step, onChange } = data
+  const config = step.config as ConditionalStepConfig
+  
+  const [isExpanded, setIsExpanded] = useState(false)
+
+  const handleChange = useCallback(
+    (field: keyof ConditionalStepConfig, 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 trueStepsCount = config.trueSteps?.length || 0
+  const falseStepsCount = config.falseSteps?.length || 0
+
+  return (
+    <BaseNode
+      data={data}
+      selected={selected}
+      id={id}
+      typeLabel="Conditional"
+      icon={<GitBranchIcon />}
+      headerColor={NODE_HEADER_COLORS.conditional}
+      showSourceHandle={false}
+      additionalSourceHandles={[
+        {
+          id: 'true',
+          position: Position.Right,
+          label: 'True',
+          color: '#22c55e',
+          style: { top: '40%' },
+        },
+        {
+          id: 'false',
+          position: Position.Right,
+          label: 'False',
+          color: '#ef4444',
+          style: { top: '60%' },
+        },
+      ]}
+    >
+      <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}>
+        <label style={styles.label}>Condition (JavaScript)</label>
+        <textarea
+          style={styles.conditionArea}
+          value={config.condition || ''}
+          onChange={(e) => handleChange('condition', e.target.value)}
+          placeholder="user_type === 'premium'"
+          spellCheck={false}
+          onKeyDown={(e) => e.stopPropagation()}
+        />
+        <div style={styles.helpText}>
+          Access variables directly: <code>variable_name</code>, <code>_record.metadata.field</code>
+        </div>
+      </div>
+
+      <div style={styles.branchInfo}>
+        <div style={styles.branchCard('true')}>
+          <div style={styles.branchLabel('true')}>
+            <TrueIcon /> True Branch
+          </div>
+          <div style={styles.branchCount}>{trueStepsCount}</div>
+          <div style={styles.branchCountLabel}>
+            step{trueStepsCount !== 1 ? 's' : ''}
+          </div>
+        </div>
+        <div style={styles.branchCard('false')}>
+          <div style={styles.branchLabel('false')}>
+            <FalseIcon /> False Branch
+          </div>
+          <div style={styles.branchCount}>{falseStepsCount}</div>
+          <div style={styles.branchCountLabel}>
+            step{falseStepsCount !== 1 ? 's' : ''}
+          </div>
+        </div>
+      </div>
+
+      {isExpanded && (
+        <div style={{ marginTop: '12px' }}>
+          <div style={styles.field}>
+            <label style={styles.label}>Condition Examples</label>
+            <div style={{ fontSize: '11px', color: '#6b7280', lineHeight: 1.6 }}>
+              <div><code>status === 'active'</code> - Check equality</div>
+              <div><code>count {'>'} 10</code> - Numeric comparison</div>
+              <div><code>data && data.length {'>'} 0</code> - Check array</div>
+              <div><code>_record.metadata.type === 'premium'</code> - API input</div>
+            </div>
+          </div>
+        </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: '12px',
+        }}
+      >
+        {isExpanded ? 'Hide Examples' : 'Show Examples'}
+      </button>
+    </BaseNode>
+  )
+})
+
+// ============================================================================
+// Icon Components
+// ============================================================================
+
+const TrueIcon = () => (
+  <svg
+    width="12"
+    height="12"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    style={{ display: 'inline', marginRight: '4px', verticalAlign: 'middle' }}
+  >
+    <polyline points="20 6 9 17 4 12" />
+  </svg>
+)
+
+const FalseIcon = () => (
+  <svg
+    width="12"
+    height="12"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    style={{ display: 'inline', marginRight: '4px', verticalAlign: 'middle' }}
+  >
+    <line x1="18" y1="6" x2="6" y2="18" />
+    <line x1="6" y1="6" x2="18" y2="18" />
+  </svg>
+)
+
+export default ConditionalNode
+

package/src/components/nodes/FetchUrlNode.tsx

@@ -0,0 +1,299 @@
+import React, { memo, useCallback, useState } from 'react'
+import type { NodeProps } from '@xyflow/react'
+import { BaseNode, GlobeIcon, NODE_HEADER_COLORS } from './BaseNode'
+import type { RuntypeNodeData, FetchUrlStepConfig, 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',
+  },
+  textarea: {
+    width: '100%',
+    padding: '8px 10px',
+    fontSize: '12px',
+    border: '1px solid #e5e7eb',
+    borderRadius: '6px',
+    backgroundColor: '#f9fafb',
+    color: '#1f2937',
+    outline: 'none',
+    resize: 'vertical' as const,
+    minHeight: '60px',
+    fontFamily: 'monospace',
+    transition: 'border-color 0.15s ease, box-shadow 0.15s ease',
+  },
+  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',
+  },
+  methodBadge: (method: string) => {
+    const colors: Record<string, { bg: string; text: string }> = {
+      GET: { bg: '#d1fae5', text: '#059669' },
+      POST: { bg: '#dbeafe', text: '#1d4ed8' },
+      PUT: { bg: '#fef3c7', text: '#d97706' },
+      DELETE: { bg: '#fee2e2', text: '#dc2626' },
+      PATCH: { bg: '#e0e7ff', text: '#4f46e5' },
+    }
+    const color = colors[method] || colors.GET
+    return {
+      display: 'inline-flex',
+      alignItems: 'center',
+      padding: '2px 8px',
+      borderRadius: '4px',
+      fontSize: '10px',
+      fontWeight: 700,
+      backgroundColor: color.bg,
+      color: color.text,
+      fontFamily: 'monospace',
+    }
+  },
+  urlPreview: {
+    fontSize: '11px',
+    color: '#6b7280',
+    backgroundColor: '#f3f4f6',
+    padding: '6px 8px',
+    borderRadius: '4px',
+    fontFamily: 'monospace',
+    wordBreak: 'break-all' as const,
+    marginTop: '4px',
+  },
+}
+
+// ============================================================================
+// Fetch URL Node Component
+// ============================================================================
+
+export const FetchUrlNode = memo(function FetchUrlNode(props: NodeProps) {
+  const { data, selected, id } = props as NodeProps & { data: RuntypeNodeData }
+  const { step, onChange } = data
+  const config = step.config as FetchUrlStepConfig
+  
+  const [isExpanded, setIsExpanded] = useState(false)
+
+  const handleChange = useCallback(
+    (field: string, value: unknown) => {
+      if (field.startsWith('http.')) {
+        const httpField = field.replace('http.', '')
+        onChange?.(id, {
+          config: {
+            ...config,
+            http: {
+              ...config.http,
+              [httpField]: value,
+            },
+          },
+        } as Partial<FlowStep>)
+      } else {
+        onChange?.(id, {
+          config: {
+            ...config,
+            [field]: value,
+          },
+        } as Partial<FlowStep>)
+      }
+    },
+    [id, config, onChange]
+  )
+
+  const handleNameChange = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      // console.log('[FetchUrlNode] Name change:', e.target.value)
+      onChange?.(id, { name: e.target.value })
+    },
+    [id, onChange]
+  )
+
+  const method = config.http?.method || 'GET'
+
+  return (
+    <BaseNode
+      data={data}
+      selected={selected}
+      id={id}
+      typeLabel="Fetch URL"
+      icon={<GlobeIcon />}
+      headerColor={NODE_HEADER_COLORS['fetch-url']}
+    >
+      <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) => {
+            // console.log('[FetchUrlNode] KeyDown:', e.key)
+            e.stopPropagation()
+          }}
+          // onInput={(e) => console.log('[FetchUrlNode] Input event:', (e.target as HTMLInputElement).value)}
+        />
+      </div>
+
+      <div style={styles.field}>
+        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '4px' }}>
+          <label style={styles.label}>Method</label>
+          <span style={styles.methodBadge(method)}>{method}</span>
+        </div>
+        <select
+          style={styles.select}
+          value={method}
+          onChange={(e) => handleChange('http.method', e.target.value)}
+          onKeyDown={(e) => e.stopPropagation()}
+        >
+          <option value="GET">GET</option>
+          <option value="POST">POST</option>
+          <option value="PUT">PUT</option>
+          <option value="DELETE">DELETE</option>
+          <option value="PATCH">PATCH</option>
+        </select>
+      </div>
+
+      <div style={styles.field}>
+        <label style={styles.label}>URL</label>
+        <input
+          style={styles.input}
+          value={config.http?.url || ''}
+          onChange={(e) => handleChange('http.url', e.target.value)}
+          placeholder="https://api.example.com/endpoint"
+          onKeyDown={(e) => e.stopPropagation()}
+        />
+        {config.http?.url && (
+          <div style={styles.urlPreview}>
+            {config.http.url}
+          </div>
+        )}
+      </div>
+
+      {isExpanded && (
+        <>
+          {(method === 'POST' || method === 'PUT' || method === 'PATCH') && (
+            <div style={styles.field}>
+              <label style={styles.label}>Request Body</label>
+              <textarea
+                style={styles.textarea}
+                value={config.http?.body || ''}
+                onChange={(e) => handleChange('http.body', e.target.value)}
+                placeholder='{"key": "value"}'
+                rows={3}
+                onKeyDown={(e) => e.stopPropagation()}
+              />
+            </div>
+          )}
+
+          <div style={styles.field}>
+            <label style={styles.label}>Headers (JSON)</label>
+            <textarea
+              style={styles.textarea}
+              value={config.http?.headers ? JSON.stringify(config.http.headers, null, 2) : ''}
+              onChange={(e) => {
+                try {
+                  const headers = JSON.parse(e.target.value)
+                  handleChange('http.headers', headers)
+                } catch {
+                  // Invalid JSON, don't update
+                }
+              }}
+              placeholder='{"Content-Type": "application/json"}'
+              rows={2}
+              onKeyDown={(e) => e.stopPropagation()}
+            />
+          </div>
+
+          <div style={styles.row}>
+            <div style={{ ...styles.field, flex: 1 }}>
+              <label style={styles.label}>Response Type</label>
+              <select
+                style={styles.select}
+                value={config.responseType || 'json'}
+                onChange={(e) => handleChange('responseType', e.target.value)}
+                onKeyDown={(e) => e.stopPropagation()}
+              >
+                <option value="json">JSON</option>
+                <option value="text">Text</option>
+                <option value="xml">XML</option>
+              </select>
+            </div>
+            <div style={{ ...styles.field, flex: 1 }}>
+              <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>
+
+          <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="api_response"
+              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 FetchUrlNode
+