polen 0.10.0-next.12 → 0.10.0-next.13

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

@@ -1,13 +1,13 @@
+/**
+ * Interactive overlay for GraphQL identifiers
+ */
+
 import type { React } from '#dep/react/index'
-import { useState } from 'react'
 import type { DOMPosition } from '../positioning-simple.ts'
 import type { SchemaResolution } from '../schema-integration.ts'
 import type { Identifier } from '../types.ts'
-import { HoverTooltip } from './HoverTooltip.tsx'
+import { GraphQLIdentifierPopover } from './GraphQLIdentifierPopover.tsx'
 
-/**
- * Props for the IdentifierLink component
- */
 export interface IdentifierLinkProps {
   /** The GraphQL identifier */
   identifier: Identifier
@@ -20,16 +20,24 @@ export interface IdentifierLinkProps {
   /** Whether to show debug visuals */
   debug?: boolean
   /** Whether this tooltip is open */
-  isOpen?: boolean
-  /** Toggle tooltip open state */
-  onToggle?: (open: boolean) => void
+  isOpen: boolean
+  /** Whether this tooltip is pinned */
+  isPinned: boolean
+  /** Handle hover start */
+  onHoverStart: () => void
+  /** Handle hover end */
+  onHoverEnd: () => void
+  /** Toggle pin state */
+  onTogglePin: () => void
+  /** Handle tooltip hover */
+  onTooltipHover: () => void
 }
 
 /**
  * Interactive overlay for a GraphQL identifier
  *
  * Renders an invisible clickable area over the identifier text
- * with hover tooltips and navigation to schema reference pages.
+ * with hover popovers and navigation to schema reference pages.
  */
 export const IdentifierLink: React.FC<IdentifierLinkProps> = ({
   identifier,
@@ -37,17 +45,13 @@ export const IdentifierLink: React.FC<IdentifierLinkProps> = ({
   position,
   onNavigate,
   debug = false,
-  isOpen = false,
-  onToggle,
+  isOpen,
+  isPinned,
+  onHoverStart,
+  onHoverEnd,
+  onTogglePin,
+  onTooltipHover,
 }) => {
-  const [isHovered, setIsHovered] = useState(false)
-
-  // Use external state if provided, otherwise manage locally
-  const showTooltip = isOpen
-  const setShowTooltip = (show: boolean) => {
-    onToggle?.(show)
-  }
-
   // Determine visual state
   const isClickable = resolution.exists
   const hasError = !resolution.exists && (identifier.kind === 'Type' || identifier.kind === 'Field')
@@ -60,162 +64,97 @@ export const IdentifierLink: React.FC<IdentifierLinkProps> = ({
     isClickable && 'graphql-clickable',
     hasError && 'graphql-error',
     isDeprecated && 'graphql-deprecated',
-    isHovered && 'graphql-hovered',
-    showTooltip && 'graphql-tooltip-open',
+    isOpen && 'graphql-hovered',
+    isOpen && 'graphql-tooltip-open',
     debug && 'graphql-debug',
   ].filter(Boolean).join(' ')
 
   const handleClick = (e: React.MouseEvent) => {
     e.preventDefault()
     e.stopPropagation()
-
-    // Toggle tooltip on click
-    setShowTooltip(!showTooltip)
+    onTogglePin()
   }
 
-  const handleNavigate = (e: React.MouseEvent) => {
-    e.preventDefault()
-    e.stopPropagation()
-    if (isClickable) {
-      onNavigate(resolution.referenceUrl)
-    }
-  }
+  // Create trigger element
+  const triggerElement = isClickable
+    ? (
+      <a
+        href={resolution.referenceUrl}
+        className={classNames + ' graphql-identifier-link'}
+        style={{
+          position: 'absolute',
+          top: position.top,
+          left: position.left,
+          width: position.width,
+          height: position.height,
+          cursor: 'pointer',
+          zIndex: 10,
+          pointerEvents: 'auto',
+          display: 'block',
+          textDecoration: 'none',
+          // Debug mode visual
+          ...(debug && {
+            backgroundColor: hasError ? 'rgba(239, 68, 68, 0.1)' : 'rgba(59, 130, 246, 0.1)',
+            border: `1px solid ${hasError ? 'rgba(239, 68, 68, 0.3)' : 'rgba(59, 130, 246, 0.3)'}`,
+          }),
+        }}
+        onClick={handleClick}
+        onMouseEnter={onHoverStart}
+        onMouseLeave={onHoverEnd}
+        aria-label={`${identifier.kind} ${identifier.name} - Click to view documentation`}
+        data-graphql-identifier={identifier.name}
+        data-graphql-kind={identifier.kind}
+      />
+    )
+    : (
+      <div
+        className={classNames}
+        style={{
+          position: 'absolute',
+          top: position.top,
+          left: position.left,
+          width: position.width,
+          height: position.height,
+          cursor: 'pointer', // Make it clickable even for errors
+          zIndex: 10,
+          pointerEvents: 'auto',
+          // Debug mode visual
+          ...(debug && {
+            backgroundColor: 'rgba(239, 68, 68, 0.1)',
+            border: `1px solid rgba(239, 68, 68, 0.3)`,
+          }),
+        }}
+        onClick={handleClick}
+        onMouseEnter={onHoverStart}
+        onMouseLeave={onHoverEnd}
+        role='button'
+        aria-label={`${identifier.kind} ${identifier.name} - Click to view information`}
+        data-graphql-identifier={identifier.name}
+        data-graphql-kind={identifier.kind}
+      />
+    )
 
   return (
-    <>
-      {isClickable
-        ? (
-          <a
-            href={resolution.referenceUrl}
-            className={classNames + ' graphql-identifier-link'}
-            style={{
-              position: 'absolute',
-              top: position.top,
-              left: position.left,
-              width: position.width,
-              height: position.height,
-              cursor: 'pointer',
-              zIndex: 10,
-              pointerEvents: 'auto',
-              display: 'block',
-              textDecoration: 'none',
-              // Debug mode visual
-              ...(debug && {
-                backgroundColor: hasError ? 'rgba(239, 68, 68, 0.1)' : 'rgba(59, 130, 246, 0.1)',
-                border: `1px solid ${hasError ? 'rgba(239, 68, 68, 0.3)' : 'rgba(59, 130, 246, 0.3)'}`,
-              }),
-            }}
-            onClick={handleClick}
-            onMouseEnter={() => setIsHovered(true)}
-            onMouseLeave={() => setIsHovered(false)}
-            aria-label={`${identifier.kind} ${identifier.name} - Click to view documentation`}
-            data-graphql-identifier={identifier.name}
-            data-graphql-kind={identifier.kind}
-          />
-        )
-        : (
-          <div
-            className={classNames}
-            style={{
-              position: 'absolute',
-              top: position.top,
-              left: position.left,
-              width: position.width,
-              height: position.height,
-              cursor: 'pointer', // Make it clickable even for errors
-              zIndex: 10,
-              pointerEvents: 'auto',
-              // Debug mode visual
-              ...(debug && {
-                backgroundColor: 'rgba(239, 68, 68, 0.1)',
-                border: `1px solid rgba(239, 68, 68, 0.3)`,
-              }),
-            }}
-            onClick={handleClick} // Add click handler for errors too
-            onMouseEnter={() => setIsHovered(true)}
-            onMouseLeave={() => setIsHovered(false)}
-            role='button'
-            aria-label={`${identifier.kind} ${identifier.name} - Click to view information`}
-            data-graphql-identifier={identifier.name}
-            data-graphql-kind={identifier.kind}
-          />
-        )}
-
-      {/* Tooltip - show on click, not hover */}
-      {showTooltip && (
-        <HoverTooltip
-          identifier={identifier}
-          documentation={resolution.documentation || {
-            description: hasError
-              ? `${identifier.kind} "${identifier.name}" not found in schema. This ${identifier.kind.toLowerCase()} does not exist in the current GraphQL schema.`
-              : `${identifier.kind}: ${identifier.name}`,
-            typeInfo: identifier.kind,
-          }}
-          position={position}
-          hasError={hasError}
-          referenceUrl={resolution.referenceUrl}
-          onClose={() => setShowTooltip(false)}
-          onNavigate={isClickable ? () => onNavigate(resolution.referenceUrl) : undefined}
-        />
-      )}
-    </>
+    <GraphQLIdentifierPopover
+      identifier={identifier}
+      documentation={resolution.documentation || {
+        description: hasError
+          ? `${identifier.kind} "${identifier.name}" not found in schema. This ${identifier.kind.toLowerCase()} does not exist in the current GraphQL schema.`
+          : `${identifier.kind}: ${identifier.name}`,
+        typeInfo: identifier.kind,
+      }}
+      hasError={hasError}
+      referenceUrl={resolution.referenceUrl}
+      open={isOpen}
+      isPinned={isPinned}
+      onOpenChange={(open) => {
+        if (!open && isPinned) {
+          onTogglePin() // Unpin when closing
+        }
+      }}
+      onNavigate={isClickable ? onNavigate : undefined}
+    >
+      {triggerElement}
+    </GraphQLIdentifierPopover>
   )
 }
-
-/**
- * Default styles for identifier overlays
- *
- * These can be included in the document or overridden by custom styles.
- */
-export const identifierLinkStyles = `
-.graphql-identifier-overlay {
-  /* Base styles for all overlays */
-  transition: background-color 0.2s ease;
-}
-
-.graphql-identifier-overlay.graphql-clickable:hover {
-  /* Subtle highlight on hover for clickable identifiers */
-  background-color: rgba(59, 130, 246, 0.05);
-}
-
-.graphql-identifier-overlay.graphql-error {
-  /* Error indicator */
-  border-bottom: 2px wavy red;
-}
-
-.graphql-identifier-overlay.graphql-deprecated {
-  /* Deprecated indicator */
-  text-decoration: line-through;
-  opacity: 0.7;
-}
-
-.graphql-identifier-overlay.graphql-debug {
-  /* Debug mode makes overlays visible */
-  background-color: rgba(59, 130, 246, 0.1) !important;
-  border: 1px solid rgba(59, 130, 246, 0.3) !important;
-}
-
-/* Kind-specific styles */
-.graphql-identifier-overlay.graphql-type {
-  /* Type identifiers */
-}
-
-.graphql-identifier-overlay.graphql-field {
-  /* Field identifiers */
-}
-
-.graphql-identifier-overlay.graphql-argument {
-  /* Argument identifiers */
-  font-style: italic;
-}
-
-.graphql-identifier-overlay.graphql-variable {
-  /* Variable identifiers */
-  color: var(--purple-11);
-}
-
-.graphql-identifier-overlay.graphql-directive {
-  /* Directive identifiers */
-  color: var(--amber-11);
-}
-`

package/src/lib/graphql-document/components/graphql-document-styles.ts

@@ -0,0 +1,167 @@
+/**
+ * Minimal styles for GraphQL Document interactive code blocks
+ */
+
+export const graphqlDocumentStyles = `
+/* Container styles */
+.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;
+}
+
+/* Identifier overlay styles */
+.graphql-identifier-overlay {
+  transition: background-color 0.2s ease;
+}
+
+/* Clickable identifiers get visual feedback */
+.graphql-identifier-overlay.graphql-clickable {
+  /* Subtle underline effect using box-shadow to not affect layout */
+  box-shadow: 0 1px 0 0 rgba(var(--accent-9), 0.3);
+  transition: box-shadow 0.2s ease, background-color 0.2s ease;
+}
+
+.graphql-identifier-overlay.graphql-clickable:hover {
+  background-color: rgba(var(--accent-3), 0.5);
+  box-shadow: 0 1px 0 0 rgba(var(--accent-9), 0.6);
+}
+
+/* Active/open state */
+.graphql-identifier-overlay.graphql-tooltip-open {
+  background-color: rgba(var(--accent-3), 0.5);
+  box-shadow: 0 1px 0 0 var(--accent-9);
+}
+
+/* Error state */
+.graphql-identifier-overlay.graphql-error {
+  box-shadow: 0 1.5px 0 0 var(--red-9);
+}
+
+.graphql-identifier-overlay.graphql-error:hover {
+  background-color: rgba(var(--red-3), 0.5);
+}
+
+/* Deprecated state */
+.graphql-identifier-overlay.graphql-deprecated {
+  text-decoration: line-through;
+  opacity: 0.7;
+}
+
+/* Debug mode */
+.graphql-identifier-overlay.graphql-debug {
+  background-color: rgba(59, 130, 246, 0.1) !important;
+  border: 1px solid rgba(59, 130, 246, 0.3) !important;
+}
+
+/* Kind-specific colors */
+.graphql-identifier-overlay.graphql-type.graphql-clickable {
+  box-shadow: 0 1px 0 0 rgba(var(--blue-9), 0.3);
+}
+
+.graphql-identifier-overlay.graphql-field.graphql-clickable {
+  box-shadow: 0 1px 0 0 rgba(var(--green-9), 0.3);
+}
+
+.graphql-identifier-overlay.graphql-argument.graphql-clickable {
+  box-shadow: 0 1px 0 0 rgba(var(--orange-9), 0.3);
+}
+
+.graphql-identifier-overlay.graphql-variable {
+  box-shadow: 0 1px 0 0 rgba(var(--purple-9), 0.3);
+}
+
+.graphql-identifier-overlay.graphql-directive.graphql-clickable {
+  box-shadow: 0 1px 0 0 rgba(var(--amber-9), 0.3);
+}
+
+/* Popover animation */
+.graphql-identifier-popover {
+  animation: graphql-popover-show 150ms ease-out;
+}
+
+@keyframes graphql-popover-show {
+  from {
+    opacity: 0;
+    transform: translateY(2px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/* Validation errors */
+.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;
+}
+
+/* Loading state */
+.graphql-document.graphql-loading {
+  opacity: 0.6;
+  pointer-events: none;
+}
+
+.graphql-document.graphql-loading::after {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 20px;
+  height: 20px;
+  margin: -10px 0 0 -10px;
+  border: 2px solid var(--gray-6);
+  border-top-color: var(--accent-9);
+  border-radius: 50%;
+  animation: graphql-spinner 0.8s linear infinite;
+}
+
+@keyframes graphql-spinner {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+/* Copy button */
+.graphql-document-copy {
+  position: absolute;
+  top: 1rem;
+  right: 1rem;
+  opacity: 0;
+  transition: opacity 0.2s ease;
+  z-index: 10;
+}
+
+.graphql-document:hover .graphql-document-copy {
+  opacity: 0.8;
+}
+
+.graphql-document-copy:hover {
+  opacity: 1 !important;
+}
+
+.graphql-document-copy[data-copied="true"] {
+  opacity: 1 !important;
+  color: var(--green-9);
+}`

package/src/lib/graphql-document/components/index.ts

@@ -1,4 +1,5 @@
+export * from './CopyButton.tsx'
 export * from './GraphQLDocument.tsx'
 export * from './GraphQLDocumentWithSchema.tsx'
-export * from './HoverTooltip.tsx'
+export * from './GraphQLIdentifierPopover.tsx'
 export * from './IdentifierLink.tsx'

package/src/lib/graphql-document/hooks/use-tooltip-state.test.ts

@@ -0,0 +1,76 @@
+/**
+ * Unit tests for tooltip state management hook
+ *
+ * @vitest-environment jsdom
+ */
+
+import { act, renderHook } from '@testing-library/react'
+import { describe, expect, it, vi } from 'vitest'
+import { useTooltipState } from './use-tooltip-state.ts'
+
+describe('useTooltipState', () => {
+  it('shows tooltip after hover delay', () => {
+    vi.useFakeTimers()
+    const { result } = renderHook(() => useTooltipState({ showDelay: 300 }))
+
+    act(() => {
+      result.current.onHoverStart('field-1')
+    })
+    expect(result.current.isOpen('field-1')).toBe(false)
+
+    act(() => {
+      vi.advanceTimersByTime(300)
+    })
+    expect(result.current.isOpen('field-1')).toBe(true)
+    vi.useRealTimers()
+  })
+
+  it('hides tooltip after hover end delay', () => {
+    vi.useFakeTimers()
+    const { result } = renderHook(() => useTooltipState())
+
+    // Show tooltip
+    act(() => {
+      result.current.onHoverStart('field-1')
+      vi.advanceTimersByTime(300)
+    })
+
+    // Trigger hide
+    act(() => {
+      result.current.onHoverEnd('field-1')
+    })
+    expect(result.current.isOpen('field-1')).toBe(true) // Still open during delay
+
+    act(() => {
+      vi.advanceTimersByTime(200)
+    })
+    expect(result.current.isOpen('field-1')).toBe(false)
+    vi.useRealTimers()
+  })
+
+  it('pins and unpins tooltip on toggle', () => {
+    const { result } = renderHook(() => useTooltipState())
+
+    act(() => {
+      result.current.onTogglePin('field-1')
+    })
+    expect(result.current.isPinned('field-1')).toBe(true)
+
+    act(() => {
+      result.current.onTogglePin('field-1')
+    })
+    expect(result.current.isPinned('field-1')).toBe(false)
+  })
+
+  it('allows multiple pins when enabled', () => {
+    const { result } = renderHook(() => useTooltipState())
+
+    act(() => {
+      result.current.onTogglePin('field-1')
+      result.current.onTogglePin('field-2')
+    })
+
+    expect(result.current.isPinned('field-1')).toBe(true)
+    expect(result.current.isPinned('field-2')).toBe(true)
+  })
+})