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

package/src/components/FormRenderer.tsx

@@ -0,0 +1,235 @@
+/**
+ * FormRenderer - Main form component
+ * Sprint 1: Form Foundation
+ * Sprint 2: Conditional field visibility (showWhen)
+ * Sprint 4: Form state persistence
+ */
+
+import { Component, createSignal, For, Show, onMount, createEffect } from 'solid-js'
+import { FormFieldRenderer } from './FormFieldRenderer'
+import type { UIComponent, FormComponentParams, FormFieldParams } from '../types'
+import { useAction } from '../hooks/useAction'
+import { validateFormData } from '../services/validation'
+import { evaluateCondition } from '../hooks/useConditionalField'
+import { useFormPersistence } from '../hooks/useFormPersistence'
+
+export interface FormRendererProps {
+  component: UIComponent
+  onSubmit?: (data: Record<string, any>) => void
+  onError?: (errors: Record<string, string>) => void
+}
+
+/**
+ * Get default value for a field type
+ */
+function getFieldDefault(type: FormFieldParams['type']): any {
+  switch (type) {
+    case 'checkbox':
+      return false
+    case 'number':
+      return undefined
+    case 'select':
+    case 'radio':
+      return ''
+    default:
+      return ''
+  }
+}
+
+export const FormRenderer: Component<FormRendererProps> = (props) => {
+  const params = () => props.component.params as FormComponentParams
+  const [formData, setFormData] = createSignal<Record<string, any>>({})
+  const [errors, setErrors] = createSignal<Record<string, string>>({})
+  const [isSubmitting, setIsSubmitting] = createSignal(false)
+  const { execute } = useAction()
+
+  // Form persistence (Sprint 4)
+  let clearPersisted: (() => void) | undefined
+
+  /**
+   * Get fields that are currently visible based on showWhen conditions
+   */
+  const getVisibleFields = (): FormFieldParams[] => {
+    return params().fields.filter((field) => {
+      if (!field.showWhen) return true
+      return evaluateCondition(field.showWhen, formData())
+    })
+  }
+
+  // Initialize form data with default values
+  const initializeForm = (clearStorage = false) => {
+    const initial: Record<string, any> = {}
+    for (const field of params().fields) {
+      initial[field.name] = field.defaultValue ?? getFieldDefault(field.type)
+    }
+    setFormData(initial)
+    setErrors({})
+
+    // Clear persisted data if requested
+    if (clearStorage && clearPersisted) {
+      clearPersisted()
+    }
+  }
+
+  // Initialize on mount
+  onMount(() => {
+    initializeForm()
+  })
+
+  // Setup persistence if persistKey is provided (Sprint 4)
+  createEffect(() => {
+    const persistKey = params().persistKey
+    if (persistKey) {
+      const persistence = useFormPersistence({
+        persistKey,
+        formData,
+        setFormData,
+        excludeFields: params().excludeFromPersistence,
+        expiresIn: params().persistExpiresIn,
+      })
+      clearPersisted = persistence.clearPersisted
+    }
+  })
+
+  const handleFieldChange = (name: string, value: any) => {
+    setFormData((prev) => ({ ...prev, [name]: value }))
+    // Clear error on change
+    if (errors()[name]) {
+      setErrors((prev) => {
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        const { [name]: _removed, ...rest } = prev
+        return rest
+      })
+    }
+  }
+
+  const handleSubmit = async (e: Event) => {
+    e.preventDefault()
+    setIsSubmitting(true)
+    setErrors({})
+
+    // Get only visible fields for validation and submission
+    const visibleFields = getVisibleFields()
+    const visibleFieldNames = new Set(visibleFields.map((f) => f.name))
+
+    // Filter form data to only include visible fields
+    const visibleFormData: Record<string, any> = {}
+    for (const [key, value] of Object.entries(formData())) {
+      if (visibleFieldNames.has(key)) {
+        visibleFormData[key] = value
+      }
+    }
+
+    // Validate only visible fields
+    const validationResult = validateFormData(visibleFormData, visibleFields)
+    if (!validationResult.valid) {
+      setErrors(validationResult.errors)
+      setIsSubmitting(false)
+      props.onError?.(validationResult.errors)
+      return
+    }
+
+    // Submit via tool call if specified
+    if (params().submitAction?.toolName) {
+      try {
+        const result = await execute(params().submitAction!.toolName, {
+          ...params().submitAction!.params,
+          formData: visibleFormData,
+        })
+        if (!result.success) {
+          setErrors({ _form: result.error || 'Submission failed' })
+          setIsSubmitting(false)
+          props.onError?.({ _form: result.error || 'Submission failed' })
+          return
+        }
+      } catch (error) {
+        const errorMessage = error instanceof Error ? error.message : 'Submission failed'
+        setErrors({ _form: errorMessage })
+        setIsSubmitting(false)
+        props.onError?.({ _form: errorMessage })
+        return
+      }
+    }
+
+    // Clear persisted data on successful submit
+    if (clearPersisted) {
+      clearPersisted()
+    }
+
+    props.onSubmit?.(visibleFormData)
+    setIsSubmitting(false)
+  }
+
+  const layoutClass = () => {
+    switch (params().layout) {
+      case 'horizontal':
+        return 'grid grid-cols-2 gap-4'
+      case 'inline':
+        return 'flex flex-wrap gap-4 items-end'
+      default:
+        return 'space-y-4'
+    }
+  }
+
+  return (
+    <div class="w-full bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 p-4">
+      <Show when={params().title}>
+        <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">
+          {params().title}
+        </h3>
+      </Show>
+
+      <form onSubmit={handleSubmit} noValidate>
+        <div class={layoutClass()}>
+          <For each={params().fields}>
+            {(field) => (
+              <FormFieldRenderer
+                field={field}
+                value={formData()[field.name]}
+                error={errors()[field.name]}
+                onChange={(value) => handleFieldChange(field.name, value)}
+                disabled={isSubmitting() || field.disabled}
+                formData={formData}
+              />
+            )}
+          </For>
+        </div>
+
+        <Show when={errors()._form}>
+          <div class="mt-4 p-3 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-md">
+            <p class="text-sm text-red-600 dark:text-red-400" role="alert">
+              {errors()._form}
+            </p>
+          </div>
+        </Show>
+
+        <div class="flex gap-2 pt-4 mt-4 border-t border-gray-200 dark:border-gray-700">
+          <button
+            type="submit"
+            disabled={isSubmitting()}
+            class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+          >
+            {isSubmitting() ? (
+              <span class="flex items-center gap-2">
+                <span class="animate-spin h-4 w-4 border-2 border-white border-t-transparent rounded-full" />
+                Submitting...
+              </span>
+            ) : (
+              params().submitLabel || 'Submit'
+            )}
+          </button>
+          <Show when={params().showReset}>
+            <button
+              type="button"
+              onClick={() => initializeForm(true)}
+              disabled={isSubmitting()}
+              class="px-4 py-2 border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 rounded-md hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+            >
+              Reset
+            </button>
+          </Show>
+        </div>
+      </form>
+    </div>
+  )
+}

package/src/components/GenerativeUIErrorBoundary.tsx

@@ -200,7 +200,7 @@ export const GenerativeUIErrorBoundary: Component<GenerativeUIErrorBoundaryProps
     >
       {/* Key prop for forcing remount on retry */}
       {(() => {
-        const _ = retryKey() // Access signal to track changes
+        void retryKey() // Access signal to track changes
         return <>{props.children}</>
       })()}
     </ErrorBoundary>

package/src/components/GridRenderer.tsx

@@ -1,11 +1,12 @@
 /**
  * GridRenderer - CSS Grid layout component for nested layouts
  * Phase 5.0: Quick Wins - Enables template builder layouts
+ * Updated: Uses RenderContext to avoid circular dependencies
  */
 
 import { Component, For, createMemo } from 'solid-js'
 import type { UIComponent, GridPosition } from '../types'
-import { UIResourceRenderer } from './UIResourceRenderer'
+import { useRenderContext } from './RenderContext'
 
 /**
  * Parameters for GridRenderer component
@@ -53,7 +54,7 @@ export interface GridRendererProps {
 /**
  * Convert grid position to CSS style string
  */
-function getGridItemStyle(position: GridPosition | undefined, areas?: string[][]): string {
+function getGridItemStyle(position: GridPosition | undefined, _areas?: string[][]): string {
   // Default to full width if no position specified
   if (!position) {
     return 'grid-column: 1 / -1; grid-row: auto'
@@ -86,6 +87,9 @@ function buildGridTemplateAreas(areas: string[][]): string {
  * Renders a CSS Grid container with nested UIComponents
  */
 export const GridRenderer: Component<GridRendererProps> = (props) => {
+  // Use render context to avoid circular dependency
+  const { renderComponent } = useRenderContext()
+
   // Extract params with defaults
   const params = createMemo(() => {
     const p = props.component.params as GridComponentParams
@@ -127,8 +131,8 @@ export const GridRenderer: Component<GridRendererProps> = (props) => {
               style={getGridItemStyle(child.position, params().areas)}
               class="min-w-0 h-full"
             >
-              {/* Use UIResourceRenderer for recursive rendering */}
-              <UIResourceRenderer content={child} onError={props.onError} />
+              {/* Use RenderContext for recursive rendering (avoids circular dependency) */}
+              {renderComponent(child, props.onError)}
             </div>
           )}
         </For>

package/src/components/ImageGalleryRenderer.test.tsx

@@ -0,0 +1,184 @@
+/**
+ * ImageGalleryRenderer Tests
+ * Sprint 5: Media Components
+ */
+
+import { describe, it, expect } from 'vitest'
+import { render, screen } from '@solidjs/testing-library'
+import { ImageGalleryRenderer } from './ImageGalleryRenderer'
+import type { ImageGalleryParams, GalleryImage } from '../types'
+
+describe('ImageGalleryRenderer', () => {
+  const sampleImages: GalleryImage[] = [
+    { url: 'https://example.com/image1.jpg', alt: 'Image 1', caption: 'First image' },
+    { url: 'https://example.com/image2.jpg', alt: 'Image 2', caption: 'Second image' },
+    { url: 'https://example.com/image3.jpg', alt: 'Image 3', caption: 'Third image' },
+  ]
+
+  const defaultParams: ImageGalleryParams = {
+    images: sampleImages,
+  }
+
+  it('renders gallery with images', () => {
+    render(() => <ImageGalleryRenderer params={defaultParams} />)
+
+    // Should render all images
+    const images = screen.getAllByRole('img')
+    expect(images.length).toBe(3)
+  })
+
+  it('renders title when provided', () => {
+    const paramsWithTitle: ImageGalleryParams = {
+      ...defaultParams,
+      title: 'Photo Gallery',
+    }
+
+    render(() => <ImageGalleryRenderer params={paramsWithTitle} />)
+
+    const title = screen.getByText('Photo Gallery')
+    expect(title).toBeTruthy()
+  })
+
+  it('does not render title when not provided', () => {
+    render(() => <ImageGalleryRenderer params={defaultParams} />)
+
+    const title = screen.queryByText('Photo Gallery')
+    expect(title).toBeNull()
+  })
+
+  it('uses thumbnail URL when available', () => {
+    const paramsWithThumbnails: ImageGalleryParams = {
+      images: [
+        {
+          url: 'https://example.com/full.jpg',
+          thumbnail: 'https://example.com/thumb.jpg',
+          alt: 'Thumbnail test',
+        },
+      ],
+    }
+
+    render(() => <ImageGalleryRenderer params={paramsWithThumbnails} />)
+
+    const img = screen.getByRole('img') as HTMLImageElement
+    expect(img.src).toBe('https://example.com/thumb.jpg')
+  })
+
+  it('shows captions when showCaptions is true', () => {
+    const paramsWithCaptions: ImageGalleryParams = {
+      ...defaultParams,
+      showCaptions: true,
+    }
+
+    render(() => <ImageGalleryRenderer params={paramsWithCaptions} />)
+
+    expect(screen.getByText('First image')).toBeTruthy()
+    expect(screen.getByText('Second image')).toBeTruthy()
+    expect(screen.getByText('Third image')).toBeTruthy()
+  })
+
+  it('does not show captions by default', () => {
+    render(() => <ImageGalleryRenderer params={defaultParams} />)
+
+    // Captions should not be visible without showCaptions
+    expect(screen.queryByText('First image')).toBeNull()
+  })
+
+  it('applies correct column classes', () => {
+    const { container, unmount } = render(() => (
+      <ImageGalleryRenderer params={{ ...defaultParams, columns: 4 }} />
+    ))
+
+    const grid = container.querySelector('.grid')
+    expect(grid?.className).toContain('grid-cols-4')
+
+    unmount()
+
+    const { container: container2 } = render(() => (
+      <ImageGalleryRenderer params={{ ...defaultParams, columns: 2 }} />
+    ))
+
+    const grid2 = container2.querySelector('.grid')
+    expect(grid2?.className).toContain('grid-cols-2')
+  })
+
+  it('applies correct gap classes', () => {
+    const { container } = render(() => (
+      <ImageGalleryRenderer params={{ ...defaultParams, gap: 'lg' }} />
+    ))
+
+    const grid = container.querySelector('.grid')
+    expect(grid?.className).toContain('gap-4')
+  })
+
+  it('applies correct aspect ratio classes', () => {
+    const { container } = render(() => (
+      <ImageGalleryRenderer params={{ ...defaultParams, aspectRatio: '16:9' }} />
+    ))
+
+    const button = container.querySelector('button')
+    expect(button?.className).toContain('aspect-video')
+  })
+
+  it('renders buttons for images when lightbox is enabled', () => {
+    render(() => <ImageGalleryRenderer params={defaultParams} />)
+
+    const buttons = screen.getAllByRole('button')
+    // Should have one button per image (for opening lightbox)
+    expect(buttons.length).toBe(3)
+  })
+
+  it('disables lightbox when lightbox is false', () => {
+    const paramsNoLightbox: ImageGalleryParams = {
+      ...defaultParams,
+      lightbox: false,
+    }
+
+    render(() => <ImageGalleryRenderer params={paramsNoLightbox} />)
+
+    // Should still render buttons (for accessibility) but not open lightbox
+    const buttons = screen.getAllByRole('button')
+    expect(buttons.length).toBe(3)
+  })
+
+  it('uses lazy loading for images', () => {
+    render(() => <ImageGalleryRenderer params={defaultParams} />)
+
+    const images = screen.getAllByRole('img') as HTMLImageElement[]
+    images.forEach((img) => {
+      // jsdom doesn't support loading property, use getAttribute
+      expect(img.getAttribute('loading')).toBe('lazy')
+    })
+  })
+
+  it('sets alt text correctly', () => {
+    render(() => <ImageGalleryRenderer params={defaultParams} />)
+
+    expect(screen.getByAltText('Image 1')).toBeTruthy()
+    expect(screen.getByAltText('Image 2')).toBeTruthy()
+    expect(screen.getByAltText('Image 3')).toBeTruthy()
+  })
+
+  it('provides default alt text when not specified', () => {
+    const paramsNoAlt: ImageGalleryParams = {
+      images: [{ url: 'https://example.com/image.jpg' }],
+    }
+
+    render(() => <ImageGalleryRenderer params={paramsNoAlt} />)
+
+    expect(screen.getByAltText('Image 1')).toBeTruthy()
+  })
+
+  it('accepts component prop', () => {
+    const component = {
+      id: 'test-gallery',
+      type: 'image-gallery' as const,
+      position: { colStart: 1, colSpan: 12 },
+      params: defaultParams,
+    }
+
+    render(() => <ImageGalleryRenderer component={component} />)
+
+    const images = screen.getAllByRole('img')
+    expect(images.length).toBe(3)
+  })
+})

package/src/components/ImageGalleryRenderer.tsx

@@ -0,0 +1,146 @@
+/**
+ * ImageGalleryRenderer - Gallery view for multiple images
+ * Sprint 5: Media Components
+ */
+
+import { Component, createSignal, For, Show } from 'solid-js'
+import type { UIComponent, ImageGalleryParams } from '../types'
+import { LightboxOverlay } from './LightboxOverlay'
+
+export interface ImageGalleryRendererProps {
+  /**
+   * UIComponent containing gallery params
+   */
+  component?: UIComponent
+
+  /**
+   * Direct gallery params (alternative to component)
+   */
+  params?: ImageGalleryParams
+}
+
+export const ImageGalleryRenderer: Component<ImageGalleryRendererProps> = (props) => {
+  const [selectedIndex, setSelectedIndex] = createSignal<number | null>(null)
+
+  const params = () => props.params || (props.component?.params as ImageGalleryParams)
+
+  const columnsClass = () => {
+    switch (params()?.columns) {
+      case 2:
+        return 'grid-cols-2'
+      case 3:
+        return 'grid-cols-3'
+      case 4:
+        return 'grid-cols-4'
+      case 5:
+        return 'grid-cols-5'
+      default:
+        return 'grid-cols-3'
+    }
+  }
+
+  const gapClass = () => {
+    switch (params()?.gap) {
+      case 'none':
+        return 'gap-0'
+      case 'sm':
+        return 'gap-1'
+      case 'lg':
+        return 'gap-4'
+      default:
+        return 'gap-2'
+    }
+  }
+
+  const aspectClass = () => {
+    switch (params()?.aspectRatio) {
+      case '1:1':
+        return 'aspect-square'
+      case '16:9':
+        return 'aspect-video'
+      case '4:3':
+        return 'aspect-[4/3]'
+      default:
+        return ''
+    }
+  }
+
+  const handleImageClick = (index: number) => {
+    if (params()?.lightbox !== false) {
+      setSelectedIndex(index)
+    }
+  }
+
+  return (
+    <div class="w-full bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden">
+      {/* Title */}
+      <Show when={params()?.title}>
+        <div class="px-4 py-3 border-b border-gray-200 dark:border-gray-700">
+          <h3 class="text-sm font-semibold text-gray-900 dark:text-white">{params()!.title}</h3>
+        </div>
+      </Show>
+
+      {/* Gallery Grid */}
+      <div class={`grid ${columnsClass()} ${gapClass()} p-4`}>
+        <For each={params()?.images}>
+          {(image, index) => (
+            <button
+              class={`relative overflow-hidden rounded-md focus:ring-2 focus:ring-blue-500 focus:outline-none group ${aspectClass()}`}
+              onClick={() => handleImageClick(index())}
+              type="button"
+              aria-label={image.alt || `View image ${index() + 1}`}
+            >
+              <img
+                src={image.thumbnail || image.url}
+                alt={image.alt || `Image ${index() + 1}`}
+                srcset={image.srcset}
+                sizes={image.sizes}
+                class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-200"
+                loading="lazy"
+              />
+
+              {/* Hover overlay */}
+              <div class="absolute inset-0 bg-black/0 group-hover:bg-black/20 transition-colors duration-200" />
+
+              {/* Caption overlay */}
+              <Show when={image.caption && params()?.showCaptions}>
+                <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/70 to-transparent text-white text-xs p-2 pt-4">
+                  <span class="truncate block">{image.caption}</span>
+                </div>
+              </Show>
+
+              {/* Zoom icon on hover */}
+              <Show when={params()?.lightbox !== false}>
+                <div class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-200">
+                  <div class="bg-white/90 dark:bg-gray-800/90 rounded-full p-2">
+                    <svg
+                      class="w-5 h-5 text-gray-700 dark:text-gray-200"
+                      fill="none"
+                      viewBox="0 0 24 24"
+                      stroke="currentColor"
+                    >
+                      <path
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                        stroke-width="2"
+                        d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0zM10 7v3m0 0v3m0-3h3m-3 0H7"
+                      />
+                    </svg>
+                  </div>
+                </div>
+              </Show>
+            </button>
+          )}
+        </For>
+      </div>
+
+      {/* Lightbox */}
+      <LightboxOverlay
+        images={params()?.images || []}
+        selectedIndex={selectedIndex()}
+        onClose={() => setSelectedIndex(null)}
+        onNavigate={setSelectedIndex}
+      />
+    </div>
+  )
+}