polen 0.10.0-next.12 → 0.10.0-next.14

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

@@ -1,14 +1,15 @@
 import type { React } from '#dep/react/index'
+import { React as ReactHooks } from '#dep/react/index'
 import type { GraphQLSchema } from 'graphql'
-import { useEffect, useMemo, useRef, useState } from 'react'
 import { useNavigate } from 'react-router'
 import { analyze } from '../analysis.ts'
+import { useTooltipState } from '../hooks/use-tooltip-state.ts'
 import { createSimplePositionCalculator } from '../positioning-simple.ts'
 import { createPolenSchemaResolver } from '../schema-integration.ts'
 import type { Identifier } from '../types.ts'
-import { hoverTooltipStyles } from './HoverTooltip.tsx'
+import { CopyButton } from './CopyButton.tsx'
+import { graphqlDocumentStyles } from './graphql-document-styles.ts'
 import { IdentifierLink } from './IdentifierLink.tsx'
-import { identifierLinkStyles } from './IdentifierLink.tsx'
 
 /**
  * Options for the GraphQL document component
@@ -64,52 +65,45 @@ export const GraphQLDocument: React.FC<GraphQLDocumentProps> = ({
   const handleNavigate = onNavigate || ((url: string) => navigate(url))
 
   // Container ref for positioning calculations
-  const containerRef = useRef<HTMLDivElement>(null)
-  const [isReady, setIsReady] = useState(false)
-  const [openTooltipId, setOpenTooltipId] = useState<string | null>(null)
-
-  // Handle click outside to close tooltips
-  useEffect(() => {
-    if (!openTooltipId) return
-
-    const handleClickOutside = (event: MouseEvent) => {
-      // Check if click is outside the tooltip and identifier links
-      const target = event.target as HTMLElement
-
-      // Don't close if clicking on an identifier link or tooltip
-      if (
-        target.closest('.graphql-identifier-overlay')
-        || target.closest('.graphql-hover-tooltip')
-      ) {
-        return
+  const containerRef = ReactHooks.useRef<HTMLDivElement>(null)
+  const [isReady, setIsReady] = ReactHooks.useState(false)
+
+  // Use tooltip state management
+  const tooltipState = useTooltipState({
+    showDelay: 300,
+    hideDelay: 200, // Increased for smoother experience
+    allowMultiplePins: true,
+  })
+
+  // Handle escape key to unpin all
+  ReactHooks.useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') {
+        tooltipState.unpinAll()
       }
-
-      // Close the tooltip
-      setOpenTooltipId(null)
     }
 
-    // Add event listener
-    document.addEventListener('mousedown', handleClickOutside)
-
+    document.addEventListener('keydown', handleKeyDown)
     return () => {
-      document.removeEventListener('mousedown', handleClickOutside)
+      document.removeEventListener('keydown', handleKeyDown)
     }
-  }, [openTooltipId])
+  }, [tooltipState])
 
   // Layer 1: Parse and analyze
-  const analysisResult = useMemo(() => {
+  const analysisResult = ReactHooks.useMemo(() => {
     if (plain) return null
     const result = analyze(children, { schema })
+    // Debug logging handled by debug prop
     return result
-  }, [children, plain, schema])
+  }, [children, plain, schema, debug])
 
   // Layer 2: Schema resolution
-  const resolver = useMemo(() => {
+  const resolver = ReactHooks.useMemo(() => {
     if (!schema || plain) return null
     return createPolenSchemaResolver(schema)
   }, [schema, plain])
 
-  const resolutions = useMemo(() => {
+  const resolutions = ReactHooks.useMemo(() => {
     if (!analysisResult || !resolver) {
       return new Map()
     }
@@ -125,16 +119,19 @@ export const GraphQLDocument: React.FC<GraphQLDocumentProps> = ({
   }, [analysisResult, resolver])
 
   // Layer 3: Position calculation
-  const positionCalculator = useMemo(() => {
+  const positionCalculator = ReactHooks.useMemo(() => {
     if (plain) return null
     return createSimplePositionCalculator()
   }, [plain])
 
-  const [positions, setPositions] = useState<Map<string, { position: any; identifier: Identifier }>>(new Map())
+  const [positions, setPositions] = ReactHooks.useState<Map<string, { position: any; identifier: Identifier }>>(
+    new Map(),
+  )
 
   // Prepare code block and calculate positions after render
-  useEffect(() => {
+  ReactHooks.useEffect(() => {
     if (!containerRef.current || !analysisResult || !positionCalculator || plain) {
+      // Skip position calculation - debug handled by debug prop
       return
     }
 
@@ -143,11 +140,13 @@ export const GraphQLDocument: React.FC<GraphQLDocumentProps> = ({
       || containerRef.current.querySelector('pre code')
       || containerRef.current.querySelector('code')
     if (!codeElement) {
+      // No code element found - skip
       return
     }
 
     // Prepare the code block (wrap identifiers)
     const identifiers = Array.from(analysisResult.identifiers.byPosition.values())
+    // Prepare code block with identifiers
     positionCalculator.prepareCodeBlock(codeElement as Element, identifiers)
 
     // Get positions after DOM update
@@ -155,45 +154,52 @@ export const GraphQLDocument: React.FC<GraphQLDocumentProps> = ({
       // Pass containerRef.current as the reference element for positioning
       if (containerRef.current) {
         const newPositions = positionCalculator.getIdentifierPositions(codeElement as Element, containerRef.current)
+        // Position calculation complete
         setPositions(newPositions)
         setIsReady(true)
       }
     })
   }, [analysisResult, positionCalculator, plain, highlightedHtml])
 
-  // Handle resize events
-  useEffect(() => {
+  // Handle resize events with debouncing
+  ReactHooks.useEffect(() => {
     if (!containerRef.current || !positionCalculator || plain) return
 
+    let resizeTimer: NodeJS.Timeout
     const handleResize = () => {
-      const codeElement = containerRef.current?.querySelector('pre.shiki code')
-        || containerRef.current?.querySelector('pre code')
-        || containerRef.current?.querySelector('code')
-      if (codeElement && containerRef.current) {
-        const newPositions = positionCalculator.getIdentifierPositions(codeElement as Element, containerRef.current)
-        setPositions(newPositions)
-      }
+      clearTimeout(resizeTimer)
+      resizeTimer = setTimeout(() => {
+        const codeElement = containerRef.current?.querySelector('pre.shiki code')
+          || containerRef.current?.querySelector('pre code')
+          || containerRef.current?.querySelector('code')
+        if (codeElement && containerRef.current) {
+          const newPositions = positionCalculator.getIdentifierPositions(codeElement as Element, containerRef.current)
+          setPositions(newPositions)
+        }
+      }, 100) // Debounce resize events
     }
 
     window.addEventListener('resize', handleResize)
-    return () => window.removeEventListener('resize', handleResize)
+    return () => {
+      clearTimeout(resizeTimer)
+      window.removeEventListener('resize', handleResize)
+    }
   }, [positionCalculator, plain])
 
   // Validation errors
-  const validationErrors = useMemo(() => {
+  const validationErrors = ReactHooks.useMemo(() => {
     if (!validate || !analysisResult || !schema) return []
     return analysisResult.errors
   }, [validate, analysisResult, schema])
 
   return (
     <>
-      {/* Inject styles */}
-      <style dangerouslySetInnerHTML={{ __html: identifierLinkStyles + '\n' + hoverTooltipStyles }} />
-
+      <style dangerouslySetInnerHTML={{ __html: graphqlDocumentStyles }} />
       <div
         ref={containerRef}
-        className={`graphql-document ${className} ${debug ? 'graphql-debug-mode' : ''}`}
-        style={{ position: 'relative' }}
+        className={`graphql-document ${className} ${debug ? 'graphql-debug-mode' : ''} ${
+          !isReady && !plain ? 'graphql-loading' : ''
+        }`}
       >
         {/* Base syntax highlighting */}
         {highlightedHtml ? <div dangerouslySetInnerHTML={{ __html: highlightedHtml }} /> : (
@@ -202,6 +208,15 @@ export const GraphQLDocument: React.FC<GraphQLDocumentProps> = ({
           </pre>
         )}
 
+        {/* Copy button */}
+        {!plain && (
+          <CopyButton
+            text={children}
+            className='graphql-document-copy'
+            size='2'
+          />
+        )}
+
         {/* Interactive overlay layer */}
         {!plain && isReady && (
           <div className='graphql-interaction-layer' style={{ pointerEvents: 'none' }}>
@@ -219,8 +234,12 @@ export const GraphQLDocument: React.FC<GraphQLDocumentProps> = ({
                   position={position}
                   onNavigate={handleNavigate}
                   debug={debug}
-                  isOpen={openTooltipId === id}
-                  onToggle={(open) => setOpenTooltipId(open ? id : null)}
+                  isOpen={tooltipState.isOpen(id)}
+                  isPinned={tooltipState.isPinned(id)}
+                  onHoverStart={() => tooltipState.onHoverStart(id)}
+                  onHoverEnd={() => tooltipState.onHoverEnd(id)}
+                  onTogglePin={() => tooltipState.onTogglePin(id)}
+                  onTooltipHover={() => tooltipState.onTooltipHover(id)}
                 />
               )
             })}
@@ -241,44 +260,3 @@ export const GraphQLDocument: React.FC<GraphQLDocumentProps> = ({
     </>
   )
 }
-
-/**
- * Default styles for the GraphQL document component
- */
-export const graphqlDocumentStyles = `
-.graphql-document {
-  position: relative;
-}
-
-.graphql-interaction-layer {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  pointer-events: none;
-}
-
-.graphql-interaction-layer > * {
-  pointer-events: auto;
-}
-
-.graphql-validation-errors {
-  margin-top: 1rem;
-  padding: 0.5rem;
-  background-color: var(--red-2);
-  border: 1px solid var(--red-6);
-  border-radius: 4px;
-}
-
-.graphql-error {
-  color: var(--red-11);
-  font-size: 0.875rem;
-  margin: 0.25rem 0;
-}
-
-.graphql-debug-mode [data-graphql-id] {
-  background-color: rgba(59, 130, 246, 0.1);
-  outline: 1px solid rgba(59, 130, 246, 0.3);
-}
-`

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

@@ -0,0 +1,197 @@
+/**
+ * GraphQL Identifier Popover using Radix Themes
+ *
+ * Displays rich information about GraphQL identifiers on hover/click
+ */
+
+import type { React } from '#dep/react/index'
+import { Cross2Icon } from '@radix-ui/react-icons'
+import { Badge, Box, Card, Flex, IconButton, Link, Popover, Text } from '@radix-ui/themes'
+import type { Documentation } from '../schema-integration.ts'
+import type { Identifier } from '../types.ts'
+
+export interface GraphQLIdentifierPopoverProps {
+  /** The identifier being shown */
+  identifier: Identifier
+  /** Documentation from schema */
+  documentation: Documentation
+  /** Whether this identifier has an error */
+  hasError?: boolean
+  /** Reference URL for "View docs" link */
+  referenceUrl: string
+  /** Whether popover is open */
+  open: boolean
+  /** Whether popover is pinned */
+  isPinned: boolean
+  /** Callback when open state changes */
+  onOpenChange: (open: boolean) => void
+  /** Callback to navigate to docs */
+  onNavigate?: (url: string) => void
+  /** The trigger element */
+  children: React.ReactNode
+}
+
+/**
+ * Popover content for GraphQL identifiers
+ */
+export const GraphQLIdentifierPopover: React.FC<GraphQLIdentifierPopoverProps> = ({
+  identifier,
+  documentation,
+  hasError = false,
+  referenceUrl,
+  open,
+  isPinned,
+  onOpenChange,
+  onNavigate,
+  children,
+}) => {
+  // 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 (
+    <Popover.Root open={open} onOpenChange={onOpenChange}>
+      <Popover.Trigger>
+        {children}
+      </Popover.Trigger>
+
+      <Popover.Content
+        className='graphql-identifier-popover'
+        style={{ maxWidth: 400 }}
+        onInteractOutside={(e) => {
+          // Prevent closing when clicking inside popover if pinned
+          if (isPinned) {
+            e.preventDefault()
+          }
+        }}
+      >
+        <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>
+            {isPinned && (
+              <IconButton
+                size='1'
+                variant='ghost'
+                onClick={() => onOpenChange(false)}
+                aria-label='Close popover'
+              >
+                <Cross2Icon />
+              </IconButton>
+            )}
+          </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 && !hasError && (
+            <Box>
+              <Link
+                size='1'
+                href={referenceUrl}
+                onClick={(e: React.MouseEvent) => {
+                  e.preventDefault()
+                  onNavigate(referenceUrl)
+                  onOpenChange(false)
+                }}
+              >
+                View full documentation →
+              </Link>
+            </Box>
+          )}
+        </Flex>
+      </Popover.Content>
+    </Popover.Root>
+  )
+}