@seed-ship/mcp-ui-solid 2.0.0 → 2.1.0

package/src/components/AutocompleteDropdown.tsx

@@ -0,0 +1,329 @@
+/**
+ * AutocompleteDropdown Component
+ * Displays data-driven dropdown suggestions
+ *
+ * Sprint Autocomplete Feature
+ */
+
+import { Component, For, Show, createMemo, JSX } from 'solid-js'
+import type { AutocompleteOption } from '../types'
+
+/**
+ * Props for AutocompleteDropdown
+ */
+export interface AutocompleteDropdownProps {
+  /**
+   * Options to display
+   */
+  options: AutocompleteOption[]
+
+  /**
+   * Currently selected index
+   */
+  selectedIndex: number
+
+  /**
+   * Whether dropdown is visible
+   */
+  isOpen: boolean
+
+  /**
+   * Callback when option is selected
+   */
+  onSelect: (option: AutocompleteOption) => void
+
+  /**
+   * Callback when option is hovered
+   */
+  onHover?: (index: number) => void
+
+  /**
+   * Whether loading
+   */
+  isLoading?: boolean
+
+  /**
+   * Custom class
+   */
+  class?: string
+
+  /**
+   * Max height
+   */
+  maxHeight?: string
+
+  /**
+   * Empty state message
+   */
+  emptyMessage?: string
+
+  /**
+   * Loading message
+   */
+  loadingMessage?: string
+
+  /**
+   * Highlight matching text in options
+   */
+  highlightMatch?: string
+
+  /**
+   * Position (default: 'bottom')
+   */
+  position?: 'top' | 'bottom'
+
+  /**
+   * Custom option renderer
+   */
+  renderOption?: (option: AutocompleteOption, isSelected: boolean) => JSX.Element
+}
+
+/**
+ * Highlight matching text
+ */
+function highlightText(text: string, match?: string): JSX.Element {
+  if (!match || !text) {
+    return <>{text}</>
+  }
+
+  const lowerText = text.toLowerCase()
+  const lowerMatch = match.toLowerCase()
+  const startIndex = lowerText.indexOf(lowerMatch)
+
+  if (startIndex === -1) {
+    return <>{text}</>
+  }
+
+  const before = text.slice(0, startIndex)
+  const matched = text.slice(startIndex, startIndex + match.length)
+  const after = text.slice(startIndex + match.length)
+
+  return (
+    <>
+      {before}
+      <strong class="mcp-autocomplete-highlight">{matched}</strong>
+      {after}
+    </>
+  )
+}
+
+/**
+ * Default option renderer
+ */
+const DefaultOptionRenderer: Component<{
+  option: AutocompleteOption
+  isSelected: boolean
+  highlightMatch?: string
+}> = (props) => {
+  const displayLabel = createMemo(() =>
+    props.option.label || props.option.value
+  )
+
+  return (
+    <div class="mcp-autocomplete-option-content">
+      <Show when={props.option.icon}>
+        <span class="mcp-autocomplete-option-icon">{props.option.icon}</span>
+      </Show>
+      <div class="mcp-autocomplete-option-text">
+        <span class="mcp-autocomplete-option-label">
+          {highlightText(displayLabel(), props.highlightMatch)}
+        </span>
+        <Show when={props.option.description}>
+          <span class="mcp-autocomplete-option-description">
+            {props.option.description}
+          </span>
+        </Show>
+      </div>
+    </div>
+  )
+}
+
+/**
+ * AutocompleteDropdown Component
+ */
+export const AutocompleteDropdown: Component<AutocompleteDropdownProps> = (props) => {
+  const positionStyles = createMemo((): JSX.CSSProperties => {
+    if (props.position === 'top') {
+      return {
+        bottom: '100%',
+        'margin-bottom': '4px'
+      }
+    }
+    return {
+      top: '100%',
+      'margin-top': '4px'
+    }
+  })
+
+  const containerStyles = createMemo((): JSX.CSSProperties => ({
+    position: 'absolute',
+    left: '0',
+    right: '0',
+    'z-index': '50',
+    'background-color': '#ffffff',
+    border: '1px solid #e5e7eb',
+    'border-radius': '6px',
+    'box-shadow': '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',
+    'max-height': props.maxHeight || '240px',
+    overflow: 'auto',
+    ...positionStyles()
+  }))
+
+  return (
+    <Show when={props.isOpen}>
+      <div
+        class={`mcp-autocomplete-dropdown ${props.class || ''}`}
+        style={containerStyles()}
+        role="listbox"
+        aria-label="Suggestions"
+      >
+        {/* Loading state */}
+        <Show when={props.isLoading}>
+          <div
+            class="mcp-autocomplete-loading"
+            style={{
+              padding: '12px 16px',
+              color: '#6b7280',
+              'font-size': '0.875rem',
+              display: 'flex',
+              'align-items': 'center',
+              gap: '8px'
+            }}
+          >
+            <span
+              style={{
+                display: 'inline-block',
+                width: '14px',
+                height: '14px',
+                border: '2px solid #e5e7eb',
+                'border-top-color': '#3b82f6',
+                'border-radius': '50%',
+                animation: 'mcp-spin 0.6s linear infinite'
+              }}
+            />
+            {props.loadingMessage || 'Loading...'}
+          </div>
+        </Show>
+
+        {/* Empty state */}
+        <Show when={!props.isLoading && props.options.length === 0}>
+          <div
+            class="mcp-autocomplete-empty"
+            style={{
+              padding: '12px 16px',
+              color: '#9ca3af',
+              'font-size': '0.875rem',
+              'text-align': 'center'
+            }}
+          >
+            {props.emptyMessage || 'No suggestions found'}
+          </div>
+        </Show>
+
+        {/* Options list */}
+        <Show when={!props.isLoading && props.options.length > 0}>
+          <ul
+            class="mcp-autocomplete-options"
+            style={{ margin: '0', padding: '4px 0', 'list-style': 'none' }}
+          >
+            <For each={props.options}>
+              {(option, index) => {
+                const isSelected = () => index() === props.selectedIndex
+                const isDisabled = () => option.disabled
+
+                return (
+                  <li
+                    role="option"
+                    aria-selected={isSelected()}
+                    aria-disabled={isDisabled()}
+                    class={`mcp-autocomplete-option ${isSelected() ? 'mcp-autocomplete-option-selected' : ''} ${isDisabled() ? 'mcp-autocomplete-option-disabled' : ''}`}
+                    style={{
+                      padding: '8px 16px',
+                      cursor: isDisabled() ? 'not-allowed' : 'pointer',
+                      'background-color': isSelected() ? '#eff6ff' : 'transparent',
+                      color: isDisabled() ? '#9ca3af' : '#374151',
+                      'font-size': '0.875rem',
+                      transition: 'background-color 150ms ease'
+                    }}
+                    onClick={() => {
+                      if (!isDisabled()) {
+                        props.onSelect(option)
+                      }
+                    }}
+                    onMouseEnter={() => {
+                      if (!isDisabled()) {
+                        props.onHover?.(index())
+                      }
+                    }}
+                  >
+                    <Show
+                      when={props.renderOption}
+                      fallback={
+                        <DefaultOptionRenderer
+                          option={option}
+                          isSelected={isSelected()}
+                          highlightMatch={props.highlightMatch}
+                        />
+                      }
+                    >
+                      {props.renderOption!(option, isSelected())}
+                    </Show>
+                  </li>
+                )
+              }}
+            </For>
+          </ul>
+        </Show>
+
+        {/* Footer hint */}
+        <Show when={!props.isLoading && props.options.length > 0}>
+          <div
+            class="mcp-autocomplete-footer"
+            style={{
+              padding: '6px 12px',
+              'border-top': '1px solid #e5e7eb',
+              'background-color': '#f9fafb',
+              'font-size': '0.75rem',
+              color: '#6b7280'
+            }}
+          >
+            <kbd style={{
+              'background-color': '#e5e7eb',
+              padding: '1px 4px',
+              'border-radius': '2px',
+              'font-family': 'inherit',
+              'font-size': '0.7rem'
+            }}>↑</kbd>
+            {' '}
+            <kbd style={{
+              'background-color': '#e5e7eb',
+              padding: '1px 4px',
+              'border-radius': '2px',
+              'font-family': 'inherit',
+              'font-size': '0.7rem'
+            }}>↓</kbd>
+            {' to navigate, '}
+            <kbd style={{
+              'background-color': '#e5e7eb',
+              padding: '1px 4px',
+              'border-radius': '2px',
+              'font-family': 'inherit',
+              'font-size': '0.7rem'
+            }}>Enter</kbd>
+            {' to select, '}
+            <kbd style={{
+              'background-color': '#e5e7eb',
+              padding: '1px 4px',
+              'border-radius': '2px',
+              'font-family': 'inherit',
+              'font-size': '0.7rem'
+            }}>Esc</kbd>
+            {' to dismiss'}
+          </div>
+        </Show>
+      </div>
+    </Show>
+  )
+}
+
+export default AutocompleteDropdown

package/src/components/AutocompleteFormField.tsx

@@ -0,0 +1,288 @@
+/**
+ * AutocompleteFormField Component
+ * Form field with integrated autocomplete support
+ *
+ * Sprint Autocomplete Feature
+ */
+
+import { Component, Show, createSignal, createMemo, Accessor, createEffect, on } from 'solid-js'
+import type { FormFieldParams, FieldAutocompleteConfig, AutocompleteContext } from '../types'
+import { useConditionalField } from '../hooks/useConditionalField'
+import { useAutocomplete } from '../hooks/useAutocomplete'
+import { useAutocompleteContextSafe } from '../context/AutocompleteContext'
+import { GhostText } from './GhostText'
+import { AutocompleteDropdown } from './AutocompleteDropdown'
+
+/**
+ * Extended FormFieldParams with autocomplete config
+ */
+export interface AutocompleteFormFieldParams extends FormFieldParams {
+  /**
+   * Autocomplete configuration for this field
+   */
+  autocomplete?: FieldAutocompleteConfig
+}
+
+/**
+ * Props for AutocompleteFormField
+ */
+export interface AutocompleteFormFieldProps {
+  /**
+   * Field configuration
+   */
+  field: AutocompleteFormFieldParams
+
+  /**
+   * Current field value
+   */
+  value: any
+
+  /**
+   * Error message
+   */
+  error?: string
+
+  /**
+   * Change handler
+   */
+  onChange: (value: any) => void
+
+  /**
+   * Whether field is disabled
+   */
+  disabled?: boolean
+
+  /**
+   * Form data accessor for conditional visibility and context
+   */
+  formData?: Accessor<Record<string, any>>
+}
+
+/**
+ * AutocompleteFormField Component
+ */
+export const AutocompleteFormField: Component<AutocompleteFormFieldProps> = (props) => {
+  // Check if autocomplete context is available
+  const autocompleteCtx = useAutocompleteContextSafe()
+
+  // Conditional visibility
+  const { isVisible } = useConditionalField({
+    condition: props.field.showWhen,
+    formData: props.formData || (() => ({}))
+  })
+
+  // Local input value for autocomplete (may differ during suggestion)
+  const [localValue, setLocalValue] = createSignal(String(props.value || ''))
+
+  // Sync external value changes
+  createEffect(on(() => props.value, (newValue) => {
+    setLocalValue(String(newValue || ''))
+  }))
+
+  // Build autocomplete context
+  const autocompleteContext = createMemo((): AutocompleteContext | undefined => {
+    const formData = props.formData?.()
+    const config = props.field.autocomplete
+
+    if (!config?.contextFields?.length && !formData) {
+      return { fieldName: props.field.name }
+    }
+
+    const contextData: Record<string, any> = {}
+    if (config?.contextFields && formData) {
+      config.contextFields.forEach(field => {
+        if (formData[field] !== undefined) {
+          contextData[field] = formData[field]
+        }
+      })
+    }
+
+    return {
+      fieldName: props.field.name,
+      formData: contextData
+    }
+  })
+
+  // Initialize autocomplete hook
+  const autocomplete = useAutocomplete({
+    inputValue: localValue,
+    pluginId: props.field.autocomplete?.plugin,
+    fieldConfig: props.field.autocomplete,
+    context: () => autocompleteContext() || { fieldName: props.field.name },
+    enabled: !!(props.field.autocomplete?.enabled && autocompleteCtx),
+    minChars: props.field.autocomplete?.minChars,
+    debounceMs: props.field.autocomplete?.debounceMs,
+    onInputChange: (value) => {
+      setLocalValue(value)
+      props.onChange(value)
+    }
+  })
+
+  // Handle input change
+  const handleInput = (value: string) => {
+    setLocalValue(value)
+    props.onChange(value)
+  }
+
+  // Handle key down
+  const handleKeyDown = (e: KeyboardEvent) => {
+    if (autocomplete.handleKeyDown(e)) {
+      return
+    }
+  }
+
+  // Base input class
+  const baseInputClass = () => `
+    w-full px-3 py-2 border rounded-md
+    focus:ring-2 focus:ring-blue-500 focus:border-blue-500
+    disabled:bg-gray-100 disabled:cursor-not-allowed
+    ${props.error
+      ? 'border-red-500 focus:ring-red-500'
+      : 'border-gray-300 dark:border-gray-600'}
+    dark:bg-gray-700 dark:text-white
+  `
+
+  const fieldId = () => `field-${props.field.name}`
+  const errorId = () => `${props.field.name}-error`
+
+  // Check if field supports autocomplete (text-based fields only)
+  const supportsAutocomplete = createMemo(() =>
+    ['text', 'email'].includes(props.field.type)
+  )
+
+  // Whether to show autocomplete features
+  const showAutocomplete = createMemo(() =>
+    supportsAutocomplete() &&
+    props.field.autocomplete?.enabled &&
+    autocompleteCtx !== undefined
+  )
+
+  return (
+    <Show when={isVisible()}>
+      <div class="space-y-1">
+        {/* Label */}
+        <Show when={props.field.label}>
+          <label
+            for={fieldId()}
+            class="block text-sm font-medium text-gray-700 dark:text-gray-300"
+          >
+            {props.field.label}
+            <Show when={props.field.required}>
+              <span class="text-red-500 ml-1" aria-hidden="true">*</span>
+            </Show>
+          </label>
+        </Show>
+
+        {/* Input with autocomplete */}
+        <div class="relative">
+          <Show
+            when={showAutocomplete()}
+            fallback={
+              /* Standard input without autocomplete */
+              <input
+                id={fieldId()}
+                type={props.field.type}
+                name={props.field.name}
+                value={props.value || ''}
+                onInput={(e) => props.onChange(e.currentTarget.value)}
+                placeholder={props.field.placeholder}
+                disabled={props.disabled}
+                required={props.field.required}
+                minLength={props.field.minLength}
+                maxLength={props.field.maxLength}
+                pattern={props.field.pattern}
+                aria-invalid={!!props.error}
+                aria-describedby={props.error ? errorId() : undefined}
+                class={baseInputClass()}
+              />
+            }
+          >
+            {/* Autocomplete-enabled input */}
+            <div class="relative">
+              {/* Ghost text overlay (for completion type) */}
+              <Show when={autocomplete.resultType() === 'completion'}>
+                <GhostText
+                  inputValue={localValue()}
+                  ghostText={autocomplete.ghostText()}
+                  visible={autocomplete.isOpen()}
+                  hintText={autocomplete.ghostText() ? 'Tab to accept' : undefined}
+                  isLoading={autocomplete.isLoading()}
+                />
+              </Show>
+
+              <input
+                id={fieldId()}
+                type={props.field.type}
+                name={props.field.name}
+                value={localValue()}
+                onInput={(e) => handleInput(e.currentTarget.value)}
+                onKeyDown={handleKeyDown}
+                onBlur={() => {
+                  // Delay dismiss to allow click on dropdown
+                  setTimeout(() => autocomplete.dismiss(), 150)
+                }}
+                onFocus={() => {
+                  if (localValue().length >= (props.field.autocomplete?.minChars || 1)) {
+                    autocomplete.open()
+                  }
+                }}
+                placeholder={props.field.placeholder}
+                disabled={props.disabled}
+                required={props.field.required}
+                minLength={props.field.minLength}
+                maxLength={props.field.maxLength}
+                pattern={props.field.pattern}
+                aria-invalid={!!props.error}
+                aria-describedby={props.error ? errorId() : undefined}
+                aria-autocomplete="list"
+                aria-expanded={autocomplete.isOpen()}
+                aria-haspopup="listbox"
+                class={`${baseInputClass()} ${autocomplete.resultType() === 'completion' ? 'bg-transparent' : ''}`}
+                style={{
+                  position: 'relative',
+                  'z-index': '2'
+                }}
+                autocomplete="off"
+              />
+
+              {/* Dropdown (for options type) */}
+              <Show when={autocomplete.resultType() === 'options'}>
+                <AutocompleteDropdown
+                  options={autocomplete.options()}
+                  selectedIndex={autocomplete.selectedIndex()}
+                  isOpen={autocomplete.isOpen()}
+                  isLoading={autocomplete.isLoading()}
+                  onSelect={(option) => {
+                    handleInput(option.value)
+                    autocomplete.dismiss()
+                  }}
+                  onHover={(_index) => {
+                    // Could add hover selection here
+                  }}
+                  highlightMatch={localValue()}
+                  loadingMessage={props.field.autocomplete?.loadingPlaceholder}
+                />
+              </Show>
+            </div>
+          </Show>
+        </div>
+
+        {/* Help text */}
+        <Show when={props.field.helpText && !props.error}>
+          <p class="text-xs text-gray-500 dark:text-gray-400">
+            {props.field.helpText}
+          </p>
+        </Show>
+
+        {/* Error message */}
+        <Show when={props.error}>
+          <p id={errorId()} role="alert" class="text-xs text-red-600 dark:text-red-400">
+            {props.error}
+          </p>
+        </Show>
+      </div>
+    </Show>
+  )
+}
+
+export default AutocompleteFormField