@seed-ship/mcp-ui-solid 2.2.4 → 2.2.7

package/src/components/ComponentToolbar.tsx

@@ -0,0 +1,101 @@
+/**
+ * ComponentToolbar - Unified toolbar for component actions
+ * v2.2.5: Consistent icon set, position, and hover behavior across all components
+ */
+
+import { Component, For, Show, createSignal } from 'solid-js'
+
+/** SVG icon paths for toolbar actions */
+const ICONS = {
+  copy: 'M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z',
+  check: 'M5 13l4 4L19 7',
+  download: 'M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z',
+  expand: 'M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5v-4m0 4h-4m4 0l-5-5',
+  wordwrap: 'M3 10h10a4 4 0 010 8H9m4 0l-3-3m3 3l-3 3M3 6h18M3 14h4',
+} as const
+
+export type ToolbarIcon = keyof typeof ICONS
+
+export interface ToolbarAction {
+  /** Icon to display */
+  icon: ToolbarIcon
+  /** Tooltip label */
+  label: string
+  /** Click handler */
+  onClick: () => void
+  /** Whether to show a success state (green check) after click */
+  showFeedback?: boolean
+  /** Active/toggled state (e.g. word wrap on) */
+  active?: boolean
+}
+
+export interface ComponentToolbarProps {
+  /** Actions to display */
+  actions: ToolbarAction[]
+  /** Corner position */
+  position?: 'top-right' | 'top-left' | 'bottom-right'
+}
+
+/**
+ * Renders a row of small icon buttons, visible on parent hover (requires parent `group` class).
+ *
+ * @example
+ * <div class="relative group">
+ *   <MyContent />
+ *   <ComponentToolbar actions={[
+ *     { icon: 'copy', label: 'Copy', onClick: handleCopy, showFeedback: true },
+ *     { icon: 'download', label: 'Download CSV', onClick: handleDownload },
+ *   ]} />
+ * </div>
+ */
+export const ComponentToolbar: Component<ComponentToolbarProps> = (props) => {
+  const positionClasses = () => {
+    switch (props.position) {
+      case 'top-left': return 'top-2 left-2'
+      case 'bottom-right': return 'bottom-2 right-2'
+      default: return 'top-2 right-2'
+    }
+  }
+
+  return (
+    <div class={`absolute ${positionClasses()} z-10 flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity`}>
+      <For each={props.actions}>
+        {(action) => <ToolbarButton action={action} />}
+      </For>
+    </div>
+  )
+}
+
+/** Individual toolbar button with optional feedback state */
+const ToolbarButton: Component<{ action: ToolbarAction }> = (props) => {
+  const [showCheck, setShowCheck] = createSignal(false)
+
+  const handleClick = () => {
+    props.action.onClick()
+    if (props.action.showFeedback) {
+      setShowCheck(true)
+      setTimeout(() => setShowCheck(false), 2000)
+    }
+  }
+
+  const iconPath = () => showCheck() ? ICONS.check : ICONS[props.action.icon]
+  const isActive = () => props.action.active
+  const colorClass = () => {
+    if (showCheck()) return 'text-green-500'
+    if (isActive()) return 'text-blue-500 dark:text-blue-400'
+    return 'text-gray-500 dark:text-gray-400'
+  }
+
+  return (
+    <button
+      onClick={handleClick}
+      class={`p-1.5 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-600 rounded-full hover:bg-gray-100 dark:hover:bg-gray-700 transition-all shadow-sm`}
+      title={props.action.label}
+      aria-label={props.action.label}
+    >
+      <svg class={`w-3 h-3 ${colorClass()}`} fill="none" viewBox="0 0 24 24" stroke="currentColor">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d={iconPath()} />
+      </svg>
+    </button>
+  )
+}

package/src/index.ts

@@ -36,6 +36,7 @@ export { DraggableGridItem } from './components/DraggableGridItem'
 export { ResizeHandle } from './components/ResizeHandle'
 export { EditableUIResourceRenderer } from './components/EditableUIResourceRenderer'
 export { ExpandableWrapper } from './components/ExpandableWrapper'
+export { ComponentToolbar } from './components/ComponentToolbar'
 
 // Autocomplete Components
 export { GhostText, GhostTextInput } from './components/GhostText'
@@ -52,6 +53,7 @@ export type { DraggableGridItemProps } from './components/DraggableGridItem'
 export type { ResizeHandleProps as ResizeHandleComponentProps } from './components/ResizeHandle'
 export type { EditableUIResourceRendererProps } from './components/EditableUIResourceRenderer'
 export type { ExpandableWrapperProps } from './components/ExpandableWrapper'
+export type { ComponentToolbarProps, ToolbarAction, ToolbarIcon } from './components/ComponentToolbar'
 export type { GhostTextProps, GhostTextInputProps } from './components/GhostText'
 export type { AutocompleteDropdownProps } from './components/AutocompleteDropdown'
 export type { AutocompleteFormFieldProps, AutocompleteFormFieldParams } from './components/AutocompleteFormField'

package/src/services/component-registry.test.ts

@@ -1,35 +1,41 @@
 /**
- * Tests for P0 fix: ComponentRegistry validation leniency
- *
- * Ensures unregistered component types (code, map, form, modal, etc.)
- * pass validation with warnings instead of failing with errors.
+ * Tests for ComponentRegistry — all 19 component types registered
  */
 
 import { describe, it, expect } from 'vitest'
 import { validateAgainstRegistry, getComponentEntry, ComponentRegistry } from './component-registry'
 import type { ComponentType } from '../types'
 
-/** The 9 types currently registered in ComponentRegistry */
-const REGISTERED_TYPES: ComponentType[] = [
+/** All 19 component types in the registry */
+const ALL_TYPES: ComponentType[] = [
   'chart', 'table', 'metric', 'text', 'grid',
   'action', 'footer', 'carousel', 'artifact',
-]
-
-/** The 9 types with renderers but NO registry entry */
-const UNREGISTERED_TYPES: ComponentType[] = [
   'code', 'map', 'form', 'modal', 'action-group',
   'image-gallery', 'video', 'iframe', 'image', 'link',
 ]
 
-describe('validateAgainstRegistry', () => {
-  describe('registered types', () => {
-    it.each(REGISTERED_TYPES)('validates "%s" with valid: true when params are correct', (type) => {
+describe('ComponentRegistry', () => {
+  describe('registry completeness', () => {
+    it('has exactly 19 registered types', () => {
+      expect(ComponentRegistry.size).toBe(19)
+    })
+
+    it.each(ALL_TYPES)('has registry entry for "%s"', (type) => {
       const entry = getComponentEntry(type)
       expect(entry).toBeDefined()
+      expect(entry!.type).toBe(type)
+      expect(entry!.name).toBeTruthy()
+      expect(entry!.description).toBeTruthy()
+      expect(entry!.schema).toBeDefined()
+      expect(entry!.examples).toBeDefined()
+    })
+  })
 
-      // Build minimal valid params from required fields
+  describe('validateAgainstRegistry', () => {
+    it.each(ALL_TYPES)('validates "%s" with valid: true when params satisfy required fields', (type) => {
+      const entry = getComponentEntry(type)!
       const params: Record<string, any> = {}
-      const required = entry!.schema.required || []
+      const required = entry.schema.required || []
       for (const key of required) {
         params[key] = 'test-value'
       }
@@ -37,45 +43,47 @@ describe('validateAgainstRegistry', () => {
       const result = validateAgainstRegistry(type, params)
       expect(result.valid).toBe(true)
       expect(result.errors).toBeUndefined()
-      expect(result.warnings).toBeUndefined()
     })
 
-    it.each(REGISTERED_TYPES)('rejects "%s" when required fields are missing', (type) => {
-      const entry = getComponentEntry(type)
-      const required = entry!.schema.required || []
-      if (required.length === 0) return // skip types with no required fields
-
+    it.each(
+      ALL_TYPES.filter((type) => {
+        const entry = getComponentEntry(type)
+        return entry && (entry.schema.required || []).length > 0
+      })
+    )('rejects "%s" when required fields are missing', (type) => {
       const result = validateAgainstRegistry(type, {})
       expect(result.valid).toBe(false)
       expect(result.errors).toBeDefined()
-      expect(result.errors!.length).toBeGreaterThan(0)
       expect(result.errors![0]).toContain('Missing required field')
     })
   })
 
-  describe('unregistered types (have renderers, no registry entry)', () => {
-    it.each(UNREGISTERED_TYPES)('passes "%s" with valid: true and a warning', (type) => {
-      const result = validateAgainstRegistry(type, { anything: true })
-      expect(result.valid).toBe(true)
-      expect(result.errors).toBeUndefined()
-      expect(result.warnings).toBeDefined()
-      expect(result.warnings![0]).toContain(`No registry entry for type: ${type}`)
-    })
-
-    it.each(UNREGISTERED_TYPES)('getComponentEntry returns undefined for "%s"', (type) => {
-      expect(getComponentEntry(type)).toBeUndefined()
-    })
+  /** Types that have examples defined */
+  const TYPES_WITH_EXAMPLES = ALL_TYPES.filter((type) => {
+    const entry = getComponentEntry(type)
+    return entry && entry.examples.length > 0
   })
 
-  describe('registry consistency', () => {
-    it('has exactly 9 registered types', () => {
-      expect(ComponentRegistry.size).toBe(9)
+  describe('example components', () => {
+    it.each(TYPES_WITH_EXAMPLES)('"%s" examples have valid structure', (type) => {
+      const entry = getComponentEntry(type)!
+      for (const example of entry.examples) {
+        expect(example.query).toBeTruthy()
+        expect(example.component).toBeDefined()
+        expect(example.component.id).toBeTruthy()
+        expect(example.component.type).toBe(type)
+        expect(example.component.position).toBeDefined()
+        expect(example.component.params).toBeDefined()
+      }
     })
+  })
 
-    it('all registered types are in REGISTERED_TYPES', () => {
-      for (const [type] of ComponentRegistry) {
-        expect(REGISTERED_TYPES).toContain(type)
-      }
+  describe('warns for truly unknown types', () => {
+    it('returns warning for unknown type "foobar"', () => {
+      const result = validateAgainstRegistry('foobar' as ComponentType, {})
+      expect(result.valid).toBe(true)
+      expect(result.warnings).toBeDefined()
+      expect(result.warnings![0]).toContain('No registry entry for type: foobar')
     })
   })
 })