polen 0.10.0-next.14 → 0.10.0-next.16

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

@@ -2,14 +2,13 @@ import type { React } from '#dep/react/index'
 import { React as ReactHooks } from '#dep/react/index'
 import type { GraphQLSchema } from 'graphql'
 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 { CopyButton } from './CopyButton.tsx'
-import { graphqlDocumentStyles } from './graphql-document-styles.ts'
-import { IdentifierLink } from './IdentifierLink.tsx'
+import { analyze } from '../analysis.js'
+import { useTooltipState } from '../hooks/use-tooltip-state.js'
+import { createSimplePositionCalculator } from '../positioning-simple.js'
+import { createPolenSchemaResolver } from '../schema-integration.js'
+import type { Identifier } from '../types.js'
+import { graphqlDocumentStyles } from './graphql-document-styles.js'
+import { IdentifierLink } from './IdentifierLink.js'
 
 /**
  * Options for the GraphQL document component
@@ -58,7 +57,7 @@ export const GraphQLDocument: React.FC<GraphQLDocumentProps> = ({
     plain = false,
     onNavigate,
     validate = true,
-    className = '',
+    className = ``,
   } = options
 
   const navigate = useNavigate()
@@ -78,14 +77,14 @@ export const GraphQLDocument: React.FC<GraphQLDocumentProps> = ({
   // Handle escape key to unpin all
   ReactHooks.useEffect(() => {
     const handleKeyDown = (event: KeyboardEvent) => {
-      if (event.key === 'Escape') {
+      if (event.key === `Escape`) {
         tooltipState.unpinAll()
       }
     }
 
-    document.addEventListener('keydown', handleKeyDown)
+    document.addEventListener(`keydown`, handleKeyDown)
     return () => {
-      document.removeEventListener('keydown', handleKeyDown)
+      document.removeEventListener(`keydown`, handleKeyDown)
     }
   }, [tooltipState])
 
@@ -136,9 +135,9 @@ export const GraphQLDocument: React.FC<GraphQLDocumentProps> = ({
     }
 
     // Get the code element within the container
-    const codeElement = containerRef.current.querySelector('pre.shiki code')
-      || containerRef.current.querySelector('pre code')
-      || containerRef.current.querySelector('code')
+    const codeElement = containerRef.current.querySelector(`pre.shiki code`)
+      || containerRef.current.querySelector(`pre code`)
+      || containerRef.current.querySelector(`code`)
     if (!codeElement) {
       // No code element found - skip
       return
@@ -147,13 +146,13 @@ export const GraphQLDocument: React.FC<GraphQLDocumentProps> = ({
     // 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)
+    positionCalculator.prepareCodeBlock(codeElement, identifiers)
 
     // Get positions after DOM update
     requestAnimationFrame(() => {
       // Pass containerRef.current as the reference element for positioning
       if (containerRef.current) {
-        const newPositions = positionCalculator.getIdentifierPositions(codeElement as Element, containerRef.current)
+        const newPositions = positionCalculator.getIdentifierPositions(codeElement, containerRef.current)
         // Position calculation complete
         setPositions(newPositions)
         setIsReady(true)
@@ -169,20 +168,20 @@ export const GraphQLDocument: React.FC<GraphQLDocumentProps> = ({
     const handleResize = () => {
       clearTimeout(resizeTimer)
       resizeTimer = setTimeout(() => {
-        const codeElement = containerRef.current?.querySelector('pre.shiki code')
-          || containerRef.current?.querySelector('pre code')
-          || containerRef.current?.querySelector('code')
+        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)
+          const newPositions = positionCalculator.getIdentifierPositions(codeElement, containerRef.current)
           setPositions(newPositions)
         }
       }, 100) // Debounce resize events
     }
 
-    window.addEventListener('resize', handleResize)
+    window.addEventListener(`resize`, handleResize)
     return () => {
       clearTimeout(resizeTimer)
-      window.removeEventListener('resize', handleResize)
+      window.removeEventListener(`resize`, handleResize)
     }
   }, [positionCalculator, plain])
 
@@ -197,9 +196,10 @@ export const GraphQLDocument: React.FC<GraphQLDocumentProps> = ({
       <style dangerouslySetInnerHTML={{ __html: graphqlDocumentStyles }} />
       <div
         ref={containerRef}
-        className={`graphql-document ${className} ${debug ? 'graphql-debug-mode' : ''} ${
-          !isReady && !plain ? 'graphql-loading' : ''
+        className={`graphql-document ${className} ${debug ? `graphql-debug-mode` : ``} ${
+          !isReady && !plain ? `graphql-loading` : ``
         }`}
+        data-testid='graphql-document'
       >
         {/* Base syntax highlighting */}
         {highlightedHtml ? <div dangerouslySetInnerHTML={{ __html: highlightedHtml }} /> : (
@@ -208,18 +208,9 @@ 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' }}>
+          <div className='graphql-interaction-layer' style={{ pointerEvents: `none` }}>
             {Array.from(positions.entries()).map(([id, { position, identifier }]) => {
               const startPos = identifier.position.start
               const resolution = resolutions.get(startPos)
@@ -236,10 +227,18 @@ export const GraphQLDocument: React.FC<GraphQLDocumentProps> = ({
                   debug={debug}
                   isOpen={tooltipState.isOpen(id)}
                   isPinned={tooltipState.isPinned(id)}
-                  onHoverStart={() => tooltipState.onHoverStart(id)}
-                  onHoverEnd={() => tooltipState.onHoverEnd(id)}
-                  onTogglePin={() => tooltipState.onTogglePin(id)}
-                  onTooltipHover={() => tooltipState.onTooltipHover(id)}
+                  onHoverStart={() => {
+                    tooltipState.onHoverStart(id)
+                  }}
+                  onHoverEnd={() => {
+                    tooltipState.onHoverEnd(id)
+                  }}
+                  onTogglePin={() => {
+                    tooltipState.onTogglePin(id)
+                  }}
+                  onTooltipHover={() => {
+                    tooltipState.onTooltipHover(id)
+                  }}
                 />
               )
             })}

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

@@ -6,9 +6,9 @@
 
 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'
+import { analyze } from '../analysis.js'
+import { createSimplePositionCalculator } from '../positioning-simple.js'
+import { analyzeWithSchema, createPolenSchemaResolver } from '../schema-integration.js'
 
 describe('GraphQLDocument logic', () => {
   const testSchema = buildSchema(`
@@ -93,7 +93,7 @@ query GetUser($id: ID!) {
     })
 
     it('should detect non-existent fields', () => {
-      const invalidQuery = `query { nonExistentField }`
+      const invalidQuery = 'query { nonExistentField }'
       const result = analyze(invalidQuery)
       const resolver = createPolenSchemaResolver(testSchema)
 

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

@@ -1,65 +1,46 @@
 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
+import { useGraphQLSchema } from '../schema-context.js'
+import { GraphQLDocument, type GraphQLDocumentProps } from './GraphQLDocument.js'
 
 /**
- * GraphQL Document component that uses the schema context and handles syntax highlighting
+ * GraphQL Document component that uses the schema context
  */
-export const GraphQLDocumentWithSchema: React.FC<Omit<GraphQLDocumentProps, 'schema' | 'highlightedHtml'>> = (
+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
+  const isInteractive = mounted && schema
 
   if (!isInteractive) {
-    // Static fallback that looks like Shiki output
+    // Static fallback
     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)' }}
+          style={{
+            backgroundColor: `var(--gray-a2)`,
+            color: `var(--gray-12)`,
+            padding: `var(--space-3)`,
+            borderRadius: `var(--radius-3)`,
+          }}
         >
-          <code className="language-graphql">{props['children']}</code>
+          <code className="language-graphql">{props.children}</code>
         </pre>
       </div>
     )
   }
 
+  // Simple highlighted HTML without syntax highlighting
+  const highlightedHtml =
+    `<pre style="background-color: var(--gray-a2); color: var(--gray-12); padding: var(--space-3); border-radius: var(--radius-3);"><code class="language-graphql">${props.children}</code></pre>`
+
   return (
     <GraphQLDocument
       {...props}

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

@@ -6,9 +6,9 @@
 
 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'
+import { Badge, Box, Flex, IconButton, Link, Popover, Text } from '@radix-ui/themes'
+import type { Documentation } from '../schema-integration.js'
+import type { Identifier } from '../types.js'
 
 export interface GraphQLIdentifierPopoverProps {
   /** The identifier being shown */
@@ -48,20 +48,20 @@ export const GraphQLIdentifierPopover: React.FC<GraphQLIdentifierPopoverProps> =
   // 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'
+      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 `gray`
     }
   }
 
@@ -96,7 +96,9 @@ export const GraphQLIdentifierPopover: React.FC<GraphQLIdentifierPopoverProps> =
               <IconButton
                 size='1'
                 variant='ghost'
-                onClick={() => onOpenChange(false)}
+                onClick={() => {
+                  onOpenChange(false)
+                }}
                 aria-label='Close popover'
               >
                 <Cross2Icon />
@@ -107,7 +109,7 @@ export const GraphQLIdentifierPopover: React.FC<GraphQLIdentifierPopoverProps> =
           {/* Type signature */}
           <Box>
             <Text size='1' color='gray'>
-              Type: <Text as='span' size='1' style={{ fontFamily: 'monospace' }}>{documentation.typeInfo}</Text>
+              Type: <Text as='span' size='1' style={{ fontFamily: `monospace` }}>{documentation.typeInfo}</Text>
             </Text>
           </Box>
 
@@ -124,8 +126,8 @@ export const GraphQLIdentifierPopover: React.FC<GraphQLIdentifierPopoverProps> =
           {documentation.defaultValue && (
             <Box>
               <Text size='1' color='gray'>
-                Default:{' '}
-                <Text as='span' size='1' style={{ fontFamily: 'monospace' }}>{documentation.defaultValue}</Text>
+                Default:{` `}
+                <Text as='span' size='1' style={{ fontFamily: `monospace` }}>{documentation.defaultValue}</Text>
               </Text>
             </Box>
           )}
@@ -134,10 +136,10 @@ export const GraphQLIdentifierPopover: React.FC<GraphQLIdentifierPopoverProps> =
           {documentation.deprecated && (
             <Box
               style={{
-                padding: '8px',
-                backgroundColor: 'var(--amber-2)',
-                borderRadius: '4px',
-                border: '1px solid var(--amber-6)',
+                padding: `8px`,
+                backgroundColor: `var(--amber-2)`,
+                borderRadius: `4px`,
+                border: `1px solid var(--amber-6)`,
               }}
             >
               <Text size='1' color='amber'>
@@ -155,10 +157,10 @@ export const GraphQLIdentifierPopover: React.FC<GraphQLIdentifierPopoverProps> =
           {hasError && (
             <Box
               style={{
-                padding: '8px',
-                backgroundColor: 'var(--red-2)',
-                borderRadius: '4px',
-                border: '1px solid var(--red-6)',
+                padding: `8px`,
+                backgroundColor: `var(--red-2)`,
+                borderRadius: `4px`,
+                border: `1px solid var(--red-6)`,
               }}
             >
               <Text size='1' color='red'>
@@ -170,7 +172,7 @@ export const GraphQLIdentifierPopover: React.FC<GraphQLIdentifierPopoverProps> =
           {/* Schema path */}
           <Box>
             <Text size='1' color='gray'>
-              Path: {identifier.schemaPath.join(' → ')}
+              Path: {identifier.schemaPath.join(` → `)}
             </Text>
           </Box>
 

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

@@ -3,10 +3,10 @@
  */
 
 import type { React } from '#dep/react/index'
-import type { DOMPosition } from '../positioning-simple.ts'
-import type { SchemaResolution } from '../schema-integration.ts'
-import type { Identifier } from '../types.ts'
-import { GraphQLIdentifierPopover } from './GraphQLIdentifierPopover.tsx'
+import type { DOMPosition } from '../positioning-simple.js'
+import type { SchemaResolution } from '../schema-integration.js'
+import type { Identifier } from '../types.js'
+import { GraphQLIdentifierPopover } from './GraphQLIdentifierPopover.js'
 
 export interface IdentifierLinkProps {
   /** The GraphQL identifier */
@@ -54,20 +54,20 @@ export const IdentifierLink: React.FC<IdentifierLinkProps> = ({
 }) => {
   // Determine visual state
   const isClickable = resolution.exists
-  const hasError = !resolution.exists && (identifier.kind === 'Type' || identifier.kind === 'Field')
+  const hasError = !resolution.exists && (identifier.kind === `Type` || identifier.kind === `Field`)
   const isDeprecated = !!resolution.deprecated
 
   // Build class names
   const classNames = [
-    'graphql-identifier-overlay',
+    `graphql-identifier-overlay`,
     `graphql-${identifier.kind.toLowerCase()}`,
-    isClickable && 'graphql-clickable',
-    hasError && 'graphql-error',
-    isDeprecated && 'graphql-deprecated',
-    isOpen && 'graphql-hovered',
-    isOpen && 'graphql-tooltip-open',
-    debug && 'graphql-debug',
-  ].filter(Boolean).join(' ')
+    isClickable && `graphql-clickable`,
+    hasError && `graphql-error`,
+    isDeprecated && `graphql-deprecated`,
+    isOpen && `graphql-hovered`,
+    isOpen && `graphql-tooltip-open`,
+    debug && `graphql-debug`,
+  ].filter(Boolean).join(` `)
 
   const handleClick = (e: React.MouseEvent) => {
     e.preventDefault()
@@ -80,22 +80,22 @@ export const IdentifierLink: React.FC<IdentifierLinkProps> = ({
     ? (
       <a
         href={resolution.referenceUrl}
-        className={classNames + ' graphql-identifier-link'}
+        className={classNames + ` graphql-identifier-link`}
         style={{
-          position: 'absolute',
+          position: `absolute`,
           top: position.top,
           left: position.left,
           width: position.width,
           height: position.height,
-          cursor: 'pointer',
+          cursor: `pointer`,
           zIndex: 10,
-          pointerEvents: 'auto',
-          display: 'block',
-          textDecoration: 'none',
+          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)'}`,
+            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}
@@ -110,17 +110,17 @@ export const IdentifierLink: React.FC<IdentifierLinkProps> = ({
       <div
         className={classNames}
         style={{
-          position: 'absolute',
+          position: `absolute`,
           top: position.top,
           left: position.left,
           width: position.width,
           height: position.height,
-          cursor: 'pointer', // Make it clickable even for errors
+          cursor: `pointer`, // Make it clickable even for errors
           zIndex: 10,
-          pointerEvents: 'auto',
+          pointerEvents: `auto`,
           // Debug mode visual
           ...(debug && {
-            backgroundColor: 'rgba(239, 68, 68, 0.1)',
+            backgroundColor: `rgba(239, 68, 68, 0.1)`,
             border: `1px solid rgba(239, 68, 68, 0.3)`,
           }),
         }}

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

@@ -141,27 +141,4 @@ export const graphqlDocumentStyles = `
   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,5 +1,4 @@
-export * from './CopyButton.tsx'
-export * from './GraphQLDocument.tsx'
-export * from './GraphQLDocumentWithSchema.tsx'
-export * from './GraphQLIdentifierPopover.tsx'
-export * from './IdentifierLink.tsx'
+export * from './GraphQLDocument.js'
+export * from './GraphQLDocumentWithSchema.js'
+export * from './GraphQLIdentifierPopover.js'
+export * from './IdentifierLink.js'