polen 0.10.0-next.10 → 0.10.0-next.12

package/src/lib/graphql-document/components/GraphQLDocument.unit.test.ts

@@ -0,0 +1,188 @@
+/**
+ * Unit tests for GraphQL Document component logic
+ *
+ * Tests the core functionality without rendering React components
+ */
+
+import { buildSchema } from 'graphql'
+import { describe, expect, it } from 'vitest'
+import { analyze } from '../analysis.ts'
+import { createSimplePositionCalculator } from '../positioning-simple.ts'
+import { analyzeWithSchema, createPolenSchemaResolver } from '../schema-integration.ts'
+
+describe('GraphQLDocument logic', () => {
+  const testSchema = buildSchema(`
+    type Query {
+      user(id: ID!): User
+      users: [User!]!
+    }
+
+    type User {
+      id: ID!
+      name: String!
+      email: String!
+      posts: [Post!]!
+    }
+
+    type Post {
+      id: ID!
+      title: String!
+      content: String!
+      author: User!
+    }
+  `)
+
+  const testQuery = `
+query GetUser($id: ID!) {
+  user(id: $id) {
+    id
+    name
+    email
+    posts {
+      title
+    }
+  }
+}`
+
+  describe('analysis integration', () => {
+    it('should analyze GraphQL document and extract identifiers', () => {
+      const result = analyze(testQuery)
+
+      expect(result.identifiers.byKind.get('Field')).toBeDefined()
+      expect(result.identifiers.byKind.get('Variable')).toBeDefined()
+      expect(result.identifiers.byKind.get('Type')).toBeDefined()
+
+      // Check specific identifiers
+      const fields = result.identifiers.byKind.get('Field') || []
+      const fieldNames = fields.map(f => f.name)
+      expect(fieldNames).toContain('user')
+      expect(fieldNames).toContain('id')
+      expect(fieldNames).toContain('name')
+      expect(fieldNames).toContain('email')
+      expect(fieldNames).toContain('posts')
+      expect(fieldNames).toContain('title')
+    })
+
+    it('should handle empty document', () => {
+      const result = analyze('')
+      expect(result.identifiers.byPosition.size).toBe(0)
+      // Empty string is technically parseable as an empty document
+      expect(result.ast).toBeDefined()
+    })
+  })
+
+  describe('schema resolution integration', () => {
+    it('should resolve identifiers against schema', () => {
+      // Use analyzeWithSchema for proper schema-aware analysis
+      const { analysis, resolutions } = analyzeWithSchema(testQuery, testSchema)
+
+      // Check that analysis found identifiers
+      expect(analysis.identifiers.all.length).toBeGreaterThan(0)
+
+      // Check that we have resolutions
+      expect(resolutions.size).toBeGreaterThan(0)
+
+      // Check that analysis is valid
+      expect(analysis.isValid).toBe(true)
+
+      // Basic check that resolutions were created
+      const hasValidResolutions = Array.from(resolutions.values()).some(
+        res => res.exists && res.referenceUrl.includes('/reference/'),
+      )
+      expect(hasValidResolutions).toBe(true)
+    })
+
+    it('should detect non-existent fields', () => {
+      const invalidQuery = `query { nonExistentField }`
+      const result = analyze(invalidQuery)
+      const resolver = createPolenSchemaResolver(testSchema)
+
+      const field = Array.from(result.identifiers.byPosition.values())[0]
+      const resolution = resolver.resolveIdentifier(field!)
+
+      expect(resolution).toBeDefined()
+      expect(resolution!.exists).toBe(false)
+    })
+  })
+
+  describe('position calculation', () => {
+    it('should create position calculator', () => {
+      const calculator = createSimplePositionCalculator()
+      expect(calculator).toBeDefined()
+      expect(calculator.prepareCodeBlock).toBeDefined()
+      expect(calculator.getIdentifierPositions).toBeDefined()
+    })
+  })
+
+  describe('options handling', () => {
+    it('should skip analysis when plain option is true', () => {
+      const options = { plain: true }
+      // When plain is true, no analysis should be performed
+      expect(options.plain).toBe(true)
+    })
+
+    it('should enable debug mode', () => {
+      const options = { debug: true }
+      expect(options.debug).toBe(true)
+    })
+
+    it('should handle custom navigation', () => {
+      const onNavigate = (url: string) => {
+        expect(url).toContain('/reference/')
+      }
+      const options = { onNavigate }
+      expect(options.onNavigate).toBeDefined()
+    })
+
+    it('should handle validation option', () => {
+      const options = { validate: true }
+      expect(options.validate).toBe(true)
+    })
+
+    it('should handle custom className', () => {
+      const options = { className: 'custom-graphql-block' }
+      expect(options.className).toBe('custom-graphql-block')
+    })
+  })
+
+  describe('validation', () => {
+    it('should validate valid queries', () => {
+      const { analysis, resolutions } = analyzeWithSchema(testQuery, testSchema)
+
+      // Check that validation passed
+      expect(analysis.isValid).toBe(true)
+
+      // Check that we have resolutions
+      expect(resolutions.size).toBeGreaterThan(0)
+
+      // Check that the user field resolved correctly
+      const userResolution = Array.from(resolutions.values()).find(
+        res => res.referenceUrl.includes('query') && res.referenceUrl.includes('user'),
+      )
+
+      if (userResolution) {
+        expect(userResolution.exists).toBe(true)
+      }
+    })
+
+    it('should detect validation errors', () => {
+      const invalidQuery = `
+        query {
+          user {
+            nonExistentField
+          }
+        }
+      `
+
+      const result = analyze(invalidQuery)
+      const resolver = createPolenSchemaResolver(testSchema)
+
+      const resolutions = Array.from(result.identifiers.byPosition.values())
+        .map(id => ({ id, resolution: resolver.resolveIdentifier(id) }))
+
+      const invalidField = resolutions.find(r => r.id.name === 'nonExistentField')
+      expect(invalidField).toBeDefined()
+      expect(invalidField!.resolution!.exists).toBe(false)
+    })
+  })
+})

package/src/lib/graphql-document/components/GraphQLDocumentWithSchema.tsx

@@ -0,0 +1,70 @@
+import type { React } from '#dep/react/index'
+import { useEffect, useState } from 'react'
+import { useGraphQLSchema } from '../schema-context.tsx'
+import { GraphQLDocument, type GraphQLDocumentProps } from './GraphQLDocument.tsx'
+
+// Cache for highlighter
+let highlighterCache: any = null
+
+/**
+ * GraphQL Document component that uses the schema context and handles syntax highlighting
+ */
+export const GraphQLDocumentWithSchema: React.FC<Omit<GraphQLDocumentProps, 'schema' | 'highlightedHtml'>> = (
+  props,
+) => {
+  const schema = useGraphQLSchema()
+  const [mounted, setMounted] = useState(false)
+  const [highlightedHtml, setHighlightedHtml] = useState<string | null>(null)
+
+  useEffect(() => {
+    setMounted(true)
+
+    const loadHighlighter = async () => {
+      try {
+        // Load highlighter if not cached
+        if (!highlighterCache) {
+          const { highlightCode } = await import('#lib/shiki/index')
+          highlighterCache = highlightCode
+        }
+
+        // Generate highlighted HTML
+        const highlighted = await highlighterCache({
+          code: props['children'],
+          lang: 'graphql',
+          theme: 'light',
+        })
+
+        setHighlightedHtml(highlighted)
+      } catch (error) {
+        console.error('Failed to load GraphQL document highlighter:', error)
+      }
+    }
+
+    loadHighlighter()
+  }, [props['children']])
+
+  // Always render the same structure to avoid hydration issues
+  const isInteractive = mounted && schema && highlightedHtml
+
+  if (!isInteractive) {
+    // Static fallback that looks like Shiki output
+    return (
+      <div className='graphql-document graphql-document-static' data-testid='graphql-document'>
+        <pre
+          className='shiki shiki-themes github-light tokyo-night'
+          style={{ backgroundColor: 'var(--shiki-light-bg)', color: 'var(--shiki-light)' }}
+        >
+          <code className="language-graphql">{props['children']}</code>
+        </pre>
+      </div>
+    )
+  }
+
+  return (
+    <GraphQLDocument
+      {...props}
+      schema={schema}
+      highlightedHtml={highlightedHtml}
+    />
+  )
+}

package/src/lib/graphql-document/components/HoverTooltip.tsx

@@ -0,0 +1,282 @@
+import type { React } from '#dep/react/index'
+import { Badge, Box, Card, Flex, Text } from '@radix-ui/themes'
+import { useEffect, useRef, useState } from 'react'
+import type { DOMPosition } from '../positioning-simple.ts'
+import type { Documentation } from '../schema-integration.ts'
+import type { Identifier } from '../types.ts'
+
+/**
+ * Props for the HoverTooltip component
+ */
+export interface HoverTooltipProps {
+  /** The identifier being hovered */
+  identifier: Identifier
+  /** Documentation from schema */
+  documentation: Documentation
+  /** Position of the identifier */
+  position: DOMPosition
+  /** Whether this identifier has an error */
+  hasError?: boolean
+  /** Reference URL for "View docs" link */
+  referenceUrl: string
+  /** Callback to close the tooltip */
+  onClose?: () => void
+  /** Callback to navigate to docs */
+  onNavigate?: () => void
+}
+
+/**
+ * Tooltip shown on hover over GraphQL identifiers
+ *
+ * Displays type information, descriptions, deprecation warnings,
+ * and links to full documentation.
+ */
+export const HoverTooltip: React.FC<HoverTooltipProps> = ({
+  identifier,
+  documentation,
+  position,
+  hasError = false,
+  referenceUrl,
+  onClose,
+  onNavigate,
+}) => {
+  const tooltipRef = useRef<HTMLDivElement>(null)
+  const [tooltipPosition, setTooltipPosition] = useState({ top: 0, left: 0 })
+
+  // Calculate tooltip position to avoid viewport edges
+  useEffect(() => {
+    if (!tooltipRef.current) return
+
+    const tooltip = tooltipRef.current
+    const rect = tooltip.getBoundingClientRect()
+    const viewportWidth = window.innerWidth
+    const viewportHeight = window.innerHeight
+
+    // Default position: above the identifier
+    let top = position.top - rect.height - 8
+    let left = position.left
+
+    // Adjust if tooltip would go off screen
+    if (top < 0) {
+      // Show below if not enough space above
+      top = position.top + position.height + 8
+    }
+
+    if (left + rect.width > viewportWidth) {
+      // Align right edge with identifier if too wide
+      left = position.left + position.width - rect.width
+    }
+
+    if (left < 0) {
+      // Keep on screen
+      left = 8
+    }
+
+    setTooltipPosition({ top, left })
+  }, [position])
+
+  // Determine badge color based on identifier kind
+  const getBadgeColor = () => {
+    switch (identifier.kind) {
+      case 'Type':
+        return 'blue'
+      case 'Field':
+        return 'green'
+      case 'Argument':
+        return 'orange'
+      case 'Variable':
+        return 'purple'
+      case 'Directive':
+        return 'amber'
+      case 'Fragment':
+        return 'cyan'
+      default:
+        return 'gray'
+    }
+  }
+
+  return (
+    <div
+      ref={tooltipRef}
+      className='graphql-hover-tooltip'
+      style={{
+        position: 'absolute',
+        top: tooltipPosition.top,
+        left: tooltipPosition.left,
+        zIndex: 100,
+        maxWidth: '400px',
+        pointerEvents: 'auto', // Make tooltip interactive
+      }}
+    >
+      <Card size='2' variant='surface'>
+        <Flex direction='column' gap='2'>
+          {/* Header with name, kind, and close button */}
+          <Flex justify='between' align='center'>
+            <Flex align='center' gap='2'>
+              <Text size='2' weight='bold'>
+                {identifier.name}
+              </Text>
+              <Badge color={getBadgeColor()} size='1'>
+                {identifier.kind}
+              </Badge>
+            </Flex>
+            {onClose && (
+              <button
+                onClick={onClose}
+                style={{
+                  background: 'none',
+                  border: 'none',
+                  cursor: 'pointer',
+                  padding: '4px',
+                  color: 'var(--gray-11)',
+                  fontSize: '18px',
+                  lineHeight: '1',
+                  fontWeight: 'bold',
+                  borderRadius: '4px',
+                  transition: 'background-color 0.2s',
+                }}
+                onMouseEnter={(e) => {
+                  e.currentTarget.style.backgroundColor = 'var(--gray-a3)'
+                }}
+                onMouseLeave={(e) => {
+                  e.currentTarget.style.backgroundColor = 'transparent'
+                }}
+                aria-label='Close tooltip'
+              >
+                ×
+              </button>
+            )}
+          </Flex>
+
+          {/* Type signature */}
+          <Box>
+            <Text size='1' color='gray'>
+              Type: <Text as='span' size='1' style={{ fontFamily: 'monospace' }}>{documentation.typeInfo}</Text>
+            </Text>
+          </Box>
+
+          {/* Description */}
+          {documentation.description && (
+            <Box>
+              <Text size='1'>
+                {documentation.description}
+              </Text>
+            </Box>
+          )}
+
+          {/* Default value for arguments */}
+          {documentation.defaultValue && (
+            <Box>
+              <Text size='1' color='gray'>
+                Default:{' '}
+                <Text as='span' size='1' style={{ fontFamily: 'monospace' }}>{documentation.defaultValue}</Text>
+              </Text>
+            </Box>
+          )}
+
+          {/* Deprecation warning */}
+          {documentation.deprecated && (
+            <Box
+              style={{
+                padding: '8px',
+                backgroundColor: 'var(--amber-2)',
+                borderRadius: '4px',
+                border: '1px solid var(--amber-6)',
+              }}
+            >
+              <Text size='1' color='amber'>
+                ⚠️ Deprecated: {documentation.deprecated.reason}
+              </Text>
+              {documentation.deprecated.replacement && (
+                <Text size='1' color='amber'>
+                  Use {documentation.deprecated.replacement} instead.
+                </Text>
+              )}
+            </Box>
+          )}
+
+          {/* Error message */}
+          {hasError && (
+            <Box
+              style={{
+                padding: '8px',
+                backgroundColor: 'var(--red-2)',
+                borderRadius: '4px',
+                border: '1px solid var(--red-6)',
+              }}
+            >
+              <Text size='1' color='red'>
+                ❌ {identifier.kind} not found in schema
+              </Text>
+            </Box>
+          )}
+
+          {/* Schema path */}
+          <Box>
+            <Text size='1' color='gray'>
+              Path: {identifier.schemaPath.join(' → ')}
+            </Text>
+          </Box>
+
+          {/* View docs link */}
+          {onNavigate && (
+            <Box>
+              <Text size='1'>
+                <a
+                  href={referenceUrl}
+                  onClick={(e) => {
+                    e.preventDefault()
+                    onNavigate()
+                    onClose?.()
+                  }}
+                  style={{
+                    color: 'var(--accent-9)',
+                    textDecoration: 'none',
+                    borderBottom: '1px solid transparent',
+                    transition: 'border-color 0.2s',
+                    cursor: 'pointer',
+                  }}
+                  onMouseEnter={(e) => {
+                    e.currentTarget.style.borderBottomColor = 'var(--accent-9)'
+                  }}
+                  onMouseLeave={(e) => {
+                    e.currentTarget.style.borderBottomColor = 'transparent'
+                  }}
+                >
+                  View full documentation →
+                </a>
+              </Text>
+            </Box>
+          )}
+        </Flex>
+      </Card>
+    </div>
+  )
+}
+
+/**
+ * Default styles for hover tooltips
+ */
+export const hoverTooltipStyles = `
+.graphql-hover-tooltip {
+  /* Tooltip animation */
+  animation: graphql-tooltip-fade-in 0.2s ease-out;
+}
+
+@keyframes graphql-tooltip-fade-in {
+  from {
+    opacity: 0;
+    transform: translateY(4px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/* Ensure tooltips appear above other content */
+.graphql-hover-tooltip .rt-Card {
+  box-shadow: 0 10px 38px -10px rgba(22, 23, 24, 0.35), 
+              0 10px 20px -15px rgba(22, 23, 24, 0.2);
+}
+`