polen 0.11.0-next.2 → 0.11.0-next.21

package/src/template/components/NamedType.tsx

@@ -1,14 +1,26 @@
-import { Box, Heading, Text } from '@radix-ui/themes'
+import { Api } from '#api/iso'
+import { Lifecycles } from '#lib/lifecycles/$'
+import { Schema } from '#lib/schema/$'
+import { Version } from '#lib/version/$'
+import { Badge, Box, Heading, Text } from '@radix-ui/themes'
+import { HashSet } from 'effect'
 import { type GraphQLNamedType } from 'graphql'
 import type { FC } from 'react'
+import { useSchema } from '../contexts/GraphqlLifecycleContext.js'
+import { useExamplesForType } from '../hooks/use-examples.js'
+import { ExampleLink } from './ExampleLink.js'
 import { FieldListSection } from './FieldListSection.js'
+import { TypeLink } from './graphql/graphql.js'
 import { Markdown } from './Markdown.js'
+import { SinceBadge } from './SinceBadge.js'
 
 export interface Props {
   data: GraphQLNamedType
 }
 
 export const NamedType: FC<Props> = ({ data }) => {
+  const { schema, lifecycles } = useSchema()
+
   const description = data.description
     ? (
       <Text as='div' color='gray'>
@@ -16,11 +28,45 @@ export const NamedType: FC<Props> = ({ data }) => {
       </Text>
     )
     : null
+
+  // Get lifecycle information for this type
+  const since = Lifecycles.getTypeSince(lifecycles, data.name, schema)
+  const removedDate = Lifecycles.getTypeRemovedDate(lifecycles, data.name, schema)
+
+  // Get examples that use this type
+  const currentVersion = Schema.Versioned.is(schema)
+    ? schema.version
+    : null
+  const examples = useExamplesForType(data.name, currentVersion)
+
   return (
     <Box>
-      <Heading size='8'>{data.name}</Heading>
+      <Box style={{ display: 'flex', alignItems: 'center', gap: '8px', marginBottom: '8px' }}>
+        <Heading size='8'>
+          <TypeLink type={data} />
+        </Heading>
+        {since && <SinceBadge since={since} />}
+        {removedDate && (
+          <Badge color='red' variant='soft' size='1'>
+            Removed {Api.Schema.dateToVersionString(removedDate)}
+          </Badge>
+        )}
+      </Box>
       {description}
       <FieldListSection data={data} />
+      {HashSet.size(examples) > 0 && (
+        <Box mt='4'>
+          <Heading size='4' mb='2'>Used in Examples</Heading>
+          <Box style={{ display: 'flex', flexWrap: 'wrap', gap: '8px' }}>
+            {[...examples].map((exampleRef) => (
+              <ExampleLink
+                key={`${exampleRef.name}-${Version.encodeSync(exampleRef.version)}`}
+                exampleRef={exampleRef}
+              />
+            ))}
+          </Box>
+        </Box>
+      )}
     </Box>
   )
 }

package/src/template/components/ReferenceLink.tsx

@@ -1,16 +1,8 @@
-import type { ReactNode } from 'react'
+import { Api } from '#api/iso'
+import type { React } from '#dep/react/index'
 import { useVersionPath } from '../hooks/useVersionPath.js'
 import { Link } from './Link.js'
 
-interface Props {
-  /** The GraphQL type name */
-  type: string
-  /** Optional field name for field-specific links */
-  field?: string
-  /** Link content */
-  children: ReactNode
-}
-
 /**
  * Link component for GraphQL schema references that preserves version context
  *
@@ -18,13 +10,22 @@ interface Props {
  * <ReferenceLink type="User">User</ReferenceLink>
  * <ReferenceLink type="User" field="name">User.name</ReferenceLink>
  */
-export const ReferenceLink = ({ type, field, children }: Props) => {
+export const ReferenceLink: React.FC<{
+  /** The GraphQL type name */
+  type: string
+  /** Optional field name for field-specific links */
+  field?: string
+  /** Link content */
+  children: React.ReactNode
+}> = ({ type, field, children }) => {
   const versionPath = useVersionPath()
 
-  let path = `/reference/${versionPath}${type}`
-  if (field) {
-    path += `/${field}`
-  }
+  const path = Api.Schema.Routing.joinSegmentsAndPaths(
+    Api.Schema.Routing.segmentLiterals.reference,
+    versionPath,
+    type,
+    field,
+  )
 
   return (
     <Link to={path}>

package/src/template/components/ReferenceVersionPicker.tsx

@@ -0,0 +1,107 @@
+import { Api } from '#api/iso'
+import type { React } from '#dep/react/index'
+import { Version } from '#lib/version/$'
+import { HashMap, Option } from 'effect'
+import { useNavigate } from 'react-router'
+import { schemasCatalog } from 'virtual:polen/project/schemas'
+import { useReferencePath } from '../hooks/useReferencePath.js'
+import { Stores } from '../stores/$.js'
+import { tryWithToast } from '../utils/try-with-toast.js'
+import { VersionPicker } from './VersionPicker.js'
+
+interface Props {
+  data: readonly Version.Version[]
+  current: Version.Version
+}
+
+export const ReferenceVersionPicker: React.FC<Props> = ({ data, current }) => {
+  const navigate = useNavigate()
+  const currentPath = useReferencePath()
+
+  const handleVersionChange = async (version: Version.Version) => {
+    const newVersion = Version.encodeSync(version)
+    const error = await tryWithToast(async () => {
+      // Get the full catalog to find the target schema
+      if (!schemasCatalog) {
+        throw new Error('No catalog available')
+      }
+      const catalog = schemasCatalog
+
+      // This component is only used for versioned catalogs
+      if (catalog._tag !== 'CatalogVersioned') {
+        throw new Error('VersionPicker used with non-versioned catalog')
+      }
+
+      // Find the schema for the target version
+      // Note: newVersion is a string that we need to parse
+      const targetSchemaOption = Option.map(
+        HashMap.findFirst(catalog.entries, (_, key) => Version.encodeSync(key) === newVersion),
+        ([, value]) => value,
+      )
+
+      if (Option.isNone(targetSchemaOption)) {
+        throw new Error(`Version ${newVersion} not found`)
+      }
+
+      const targetSchema = Option.getOrThrow(targetSchemaOption)
+
+      // Find fallback path if needed
+      const fallbackPath = Api.Schema.Validation.findFallbackPath(targetSchema.definition, currentPath)
+      // Get redirect description if path changed
+      const redirectDescription = Api.Schema.Validation.getRedirectDescription(
+        targetSchema.definition,
+        currentPath,
+        fallbackPath,
+        newVersion,
+      )
+      // Create the new path - parse newVersion string to Version type
+      const newPath = Api.Schema.Routing.createReferencePath({
+        version: Version.fromString(newVersion),
+        type: fallbackPath.type || '',
+        field: fallbackPath.field || '',
+      })
+      // Show toast notification if schema location redirect will occur
+      if (redirectDescription) {
+        Stores.Toast.store.info(redirectDescription, {
+          duration: 160_000,
+          actions: [
+            {
+              label: 'Go back',
+              onClick() {
+                navigate(-1)
+              },
+            },
+            {
+              label: 'View changelog',
+              onClick() {
+                // Navigate to changelog page
+                navigate('/changelog')
+              },
+            },
+          ],
+        })
+      }
+
+      navigate(newPath)
+    }, 'Failed to switch version')
+
+    // Fallback logic if error occurred
+    if (error) {
+      // Fallback to simple navigation if schema loading fails
+      const newPath = Api.Schema.Routing.createReferencePath({
+        version: Version.fromString(newVersion),
+        type: currentPath.type || '',
+        field: currentPath.field || '',
+      })
+      navigate(newPath)
+    }
+  }
+
+  return (
+    <VersionPicker
+      versions={data}
+      currentVersion={current}
+      onVersionChange={handleVersionChange}
+    />
+  )
+}

package/src/template/components/SinceBadge.tsx

@@ -0,0 +1,35 @@
+import { Api } from '#api/iso'
+import type { Lifecycles } from '#lib/lifecycles/$'
+import { Version } from '#lib/version/$'
+import { Badge, Link } from '@radix-ui/themes'
+import { Match } from 'effect'
+import type React from 'react'
+
+export const SinceBadge: React.FC<{ since: Lifecycles.Since }> = ({ since }) => {
+  return (
+    since._tag === 'initial'
+      ? (
+        <Badge color='blue' variant='soft' size='1'>
+          Since initial version
+        </Badge>
+      )
+      : (
+        <Link
+          href={Api.Schema.Routing.createChangelogUrl(
+            since.revision.date,
+            since.schema,
+          )}
+          style={{ textDecoration: 'none' }}
+        >
+          <Badge color='green' variant='soft' size='1' style={{ cursor: 'pointer' }}>
+            Added {Match.value(since.schema).pipe(
+              Match.tagsExhaustive({
+                SchemaVersioned: (s) => `${Version.encodeSync(s.version)}@${since.revision.date}`,
+                SchemaUnversioned: () => since.revision.date,
+              }),
+            )}
+          </Badge>
+        </Link>
+      )
+  )
+}

package/src/template/components/ToastContainer.tsx

@@ -0,0 +1,67 @@
+import type { React } from '#dep/react/index'
+import { Box, Flex } from '@radix-ui/themes'
+import { useSnapshot } from 'valtio'
+import { Stores } from '../stores/$.js'
+import { ToastItem } from './ToastItem.js'
+
+export const ToastContainer: React.FC = () => {
+  const snap = useSnapshot(Stores.Toast.store)
+
+  return (
+    <>
+      <style>
+        {`
+          @keyframes slideIn {
+            from {
+              transform: translateX(100%);
+              opacity: 0;
+            }
+            to {
+              transform: translateX(0);
+              opacity: 1;
+            }
+          }
+
+          @keyframes slideOut {
+            from {
+              transform: translateX(0);
+              opacity: 1;
+            }
+            to {
+              transform: translateX(100%);
+              opacity: 0;
+            }
+          }
+
+          @keyframes timerCountdown {
+            from {
+              width: 100%;
+            }
+            to {
+              width: 0%;
+            }
+          }
+        `}
+      </style>
+      <Box
+        position='fixed'
+        bottom='0'
+        right='0'
+        p='4'
+        style={{
+          zIndex: 9999,
+          pointerEvents: 'none',
+        }}
+      >
+        <Flex
+          direction='column'
+          gap='2'
+          align='end'
+          style={{ pointerEvents: 'auto' }}
+        >
+          {snap.toasts.map(toast => <ToastItem key={toast.id} toast={toast} />)}
+        </Flex>
+      </Box>
+    </>
+  )
+}

package/src/template/components/ToastItem.tsx

@@ -0,0 +1,119 @@
+import type { React } from '#dep/react/index'
+import {
+  CheckCircledIcon,
+  Cross2Icon,
+  CrossCircledIcon,
+  ExclamationTriangleIcon,
+  InfoCircledIcon,
+} from '@radix-ui/react-icons'
+import { Box, Button, Card, Flex, IconButton, Text } from '@radix-ui/themes'
+import type { TextProps } from '@radix-ui/themes'
+import type { ReadonlyDeep } from 'type-fest'
+import { Stores } from '../stores/$.js'
+
+const toastVariants = {
+  info: {
+    icon: <InfoCircledIcon />,
+    color: 'blue',
+  },
+  success: {
+    icon: <CheckCircledIcon />,
+    color: 'green',
+  },
+  warning: {
+    icon: <ExclamationTriangleIcon />,
+    color: 'amber',
+  },
+  error: {
+    icon: <CrossCircledIcon />,
+    color: 'red',
+  },
+} satisfies Record<Stores.Toast.Type, {
+  icon: React.ReactElement
+  color: NonNullable<TextProps['color']>
+}>
+
+export const ToastItem: React.FC<{ toast: ReadonlyDeep<Stores.Toast.Toast> }> = ({ toast }) => {
+  const handleClose = () => Stores.toast.remove(toast.id)
+  const duration = toast.duration ?? 5000
+  const showTimer = duration > 0
+  const type: Stores.Toast.Type = toast.type || 'info'
+
+  return (
+    <Card
+      size={'2'}
+      style={{
+        animation: 'slideIn 0.2s ease-out',
+        position: 'relative',
+      }}
+    >
+      <Flex gap='3' align='start' maxWidth={'400px'}>
+        <Text
+          as='div'
+          size='4'
+          color={toastVariants[type].color}
+        >
+          {toastVariants[type].icon}
+        </Text>
+        <Box style={{ flex: 1 }}>
+          <Flex align='baseline' gap='2' wrap='wrap'>
+            <Text weight='medium' size='2'>
+              {toast.message}
+            </Text>
+            {toast.actions.map((action) => (
+              <Button
+                id={action.label}
+                size='1'
+                variant='soft'
+                onClick={() => {
+                  action.onClick()
+                  handleClose()
+                }}
+              >
+                {action.label}
+              </Button>
+            ))}
+          </Flex>
+
+          {toast.description && (
+            <Text size='1' color='gray' mt='1' style={{ display: 'block' }}>
+              {toast.description}
+            </Text>
+          )}
+        </Box>
+
+        <IconButton
+          size='1'
+          variant='ghost'
+          color='gray'
+          onClick={handleClose}
+          style={{ flexShrink: 0 }}
+        >
+          <Cross2Icon />
+        </IconButton>
+      </Flex>
+
+      {showTimer && (
+        <Box
+          style={{
+            position: 'absolute',
+            bottom: 0,
+            left: 0,
+            right: 0,
+            height: '2px',
+            backgroundColor: `var(--${toastVariants[toast.type || 'info'].color}-a3)`,
+            overflow: 'hidden',
+          }}
+        >
+          <Box
+            style={{
+              height: '100%',
+              backgroundColor: `var(--${toastVariants[toast.type || 'info'].color}-a6)`,
+              animation: `timerCountdown ${duration}ms linear forwards`,
+            }}
+          />
+        </Box>
+      )}
+    </Card>
+  )
+}

package/src/template/components/TypeAnnotation.tsx

@@ -1,17 +1,13 @@
+import type { React } from '#dep/react/index'
 import { Text } from '@radix-ui/themes'
 import type { GraphQLType } from 'graphql'
-import { isInputObjectType, isListType, isNamedType, isNonNullType, isScalarType } from 'graphql'
-import type { FC } from 'react'
-import { ReferenceLink } from './ReferenceLink.js'
-
-export interface Props {
-  type: GraphQLType // Can be either GraphQLInputType or GraphQLOutputType
-}
+import { isListType, isNamedType, isNonNullType } from 'graphql'
+import { TypeLink } from './graphql/graphql.js'
 
 /**
  * Renders a GraphQL type recursively, with links for named types
  */
-export const TypeAnnotation: FC<Props> = ({ type }) => {
+export const TypeAnnotation: React.FC<{ type: GraphQLType }> = ({ type }) => {
   // Handle NonNull type wrapper
   if (isNonNullType(type)) {
     return (
@@ -33,31 +29,13 @@ export const TypeAnnotation: FC<Props> = ({ type }) => {
     )
   }
 
-  // Handle named types
+  // Handle named types - use TypeLink which already has icon support
   if (isNamedType(type)) {
-    const namedType = type
-
-    // Handle input object types
-    if (isInputObjectType(namedType)) {
-      return (
-        <ReferenceLink type={namedType.name}>
-          <Text color='green'>{namedType.name}</Text>
-        </ReferenceLink>
-      )
-    }
-
-    // If it's an expandable type (object or interface), make it a link
-    // if (Grafaid.isExpandableType(namedType)) {
-    return (
-      <ReferenceLink type={namedType.name}>
-        <Text color={isScalarType(namedType) ? `purple` : `blue`}>{namedType.name}</Text>
-      </ReferenceLink>
-    )
-
-    // For scalar and other non-expandable types, just render the name
-    // return <Text color="purple">{namedType.name}</Text>
+    return <TypeLink type={type} />
   }
 
-  // Fallback for any other case (shouldn't happen in standard GraphQL usage)
-  return <Text>{String(type)}</Text>
+  // TypeScript exhaustiveness check - this should be unreachable
+  // as the above three cases cover all possible GraphQLType implementations
+  const _exhaustive: never = type
+  throw new Error(`Unexpected GraphQL type encountered: ${String(_exhaustive)}`)
 }

package/src/template/components/TypeIndex.tsx

@@ -1,4 +1,4 @@
-import { GrafaidOld } from '#lib/grafaid-old/index'
+import { GrafaidOld } from '#lib/grafaid-old'
 import { Box, Flex, Heading } from '@radix-ui/themes'
 import { Obj } from '@wollybeard/kit'
 import type { GraphQLNamedType, GraphQLSchema } from 'graphql'

package/src/template/components/VersionCoveragePicker.tsx

@@ -0,0 +1,56 @@
+import { Catalog } from '#lib/catalog/$'
+import { Document } from '#lib/document/$'
+import { VersionCoverage } from '#lib/version-coverage'
+import { Select } from '@radix-ui/themes'
+import { HashMap } from 'effect'
+import type { FC } from 'react'
+
+interface Props {
+  document: Document.Document
+  schemaCatalog: Catalog.Catalog
+  current: VersionCoverage.VersionCoverage
+  onChange: (versionCoverage: VersionCoverage.VersionCoverage) => void
+}
+
+/**
+ * Version picker for examples that shows all schema versions.
+ * Groups versions that share the same document into single entries.
+ */
+export const VersionCoveragePicker: FC<Props> = ({
+  document,
+  current,
+  onChange,
+}) => {
+  if (Document.Unversioned.is(document)) return null
+
+  const options = Array.from(HashMap.keys(document.versionDocuments))
+  if (options.length === 0) return null
+
+  return (
+    <Select.Root
+      value={VersionCoverage.toLabel(current)}
+      onValueChange={(label) => {
+        // Find the full version coverage by label and pass it entirely
+        const selection = options.find(s => VersionCoverage.toLabel(s) === label)
+        if (selection) {
+          // Pass the entire VersionCoverage, not just the first version
+          onChange(selection)
+        }
+      }}
+    >
+      <Select.Trigger>
+        {VersionCoverage.toLabel(current)}
+      </Select.Trigger>
+      <Select.Content position='popper' sideOffset={5}>
+        {options.map(selection => (
+          <Select.Item
+            key={VersionCoverage.toLabel(selection)}
+            value={VersionCoverage.toLabel(selection)}
+          >
+            {VersionCoverage.toLabel(selection)}
+          </Select.Item>
+        ))}
+      </Select.Content>
+    </Select.Root>
+  )
+}

package/src/template/components/VersionPicker.tsx

@@ -0,0 +1,42 @@
+import { Version } from '#lib/version/$'
+import { Select } from '@radix-ui/themes'
+import type * as React from 'react'
+
+interface Props {
+  versions: readonly Version.Version[]
+  currentVersion: Version.Version
+  onVersionChange: (version: Version.Version) => void
+}
+
+/**
+ * A generic version picker component that can be used for any versioned content.
+ * This is a controlled component - parent manages the state.
+ */
+export const VersionPicker: React.FC<Props> = ({
+  versions,
+  currentVersion,
+  onVersionChange,
+}) => {
+  // Don't show selector if only one version
+  if (versions.length <= 1) {
+    return null
+  }
+
+  return (
+    <Select.Root
+      value={Version.encodeSync(currentVersion)}
+      onValueChange={(versionEncoded) => onVersionChange(Version.fromString(versionEncoded))}
+    >
+      <Select.Trigger style={{ minWidth: '120px' }}>
+        Version {Version.encodeSync(currentVersion)}
+      </Select.Trigger>
+      <Select.Content position='popper' sideOffset={5}>
+        {versions.map(version => (
+          <Select.Item key={Version.encodeSync(version)} value={Version.encodeSync(version)}>
+            Version {Version.encodeSync(version)}
+          </Select.Item>
+        ))}
+      </Select.Content>
+    </Select.Root>
+  )
+}

package/src/template/components/graphql/type-kind-icon.tsx

@@ -1,5 +1,5 @@
 import type { React } from '#dep/react/index'
-import type { Grafaid } from '#lib/grafaid/index'
+import type { Grafaid } from '#lib/grafaid'
 import { Code } from '@radix-ui/themes'
 import { typeKindTokensIndex, unknownTypeKindToken } from './type-kind-tokens.js'
 

package/src/template/components/graphql/type-kind-tokens.ts

@@ -1,4 +1,4 @@
-import type { Grafaid } from '#lib/grafaid/index'
+import type { Grafaid } from '#lib/grafaid'
 import type { colorPropDef } from '@radix-ui/themes/props'
 
 type RadixColor = typeof colorPropDef[`color`][`values`][number]

package/src/template/components/graphql/type-link.tsx

@@ -1,4 +1,4 @@
-import { Grafaid } from '#lib/grafaid/index'
+import { Grafaid } from '#lib/grafaid'
 import { Code, Flex } from '@radix-ui/themes'
 import { ReferenceLink } from '../ReferenceLink.js'
 import { TypeKindIcon } from './graphql.js'