polen 0.11.0-next.11 → 0.11.0-next.13

package/src/template/components/Changelog/groups/FieldArgumentOperation.tsx

@@ -1,4 +1,4 @@
-import type { GraphqlChange } from '#lib/graphql-change/index'
+import type { GraphqlChange } from '#lib/graphql-change'
 import { Code } from '@radix-ui/themes'
 import type React from 'react'
 import { ChangeBase } from '../ChangeBase.js'

package/src/template/components/Changelog/groups/FieldDeprecation.tsx

@@ -1,4 +1,4 @@
-import type { GraphqlChange } from '#lib/graphql-change/index'
+import type { GraphqlChange } from '#lib/graphql-change'
 import { Code } from '@radix-ui/themes'
 import type React from 'react'
 import { ChangeBase } from '../ChangeBase.js'

package/src/template/components/Changelog/groups/FieldDeprecationReason.tsx

@@ -1,4 +1,4 @@
-import type { GraphqlChange } from '#lib/graphql-change/index'
+import type { GraphqlChange } from '#lib/graphql-change'
 import { Code } from '@radix-ui/themes'
 import type React from 'react'
 import { ChangeBase } from '../ChangeBase.js'

package/src/template/components/Changelog/groups/FieldDescription.tsx

@@ -1,4 +1,4 @@
-import type { GraphqlChange } from '#lib/graphql-change/index'
+import type { GraphqlChange } from '#lib/graphql-change'
 import { Code } from '@radix-ui/themes'
 import type React from 'react'
 import { ChangeBase } from '../ChangeBase.js'

package/src/template/components/Changelog/groups/FieldOperation.tsx

@@ -1,4 +1,4 @@
-import type { GraphqlChange } from '#lib/graphql-change/index'
+import type { GraphqlChange } from '#lib/graphql-change'
 import { Code } from '@radix-ui/themes'
 import type React from 'react'
 import { ChangeBase } from '../ChangeBase.js'

package/src/template/components/Changelog/groups/InputFieldDefaultValue.tsx

@@ -1,4 +1,4 @@
-import type { GraphqlChange } from '#lib/graphql-change/index'
+import type { GraphqlChange } from '#lib/graphql-change'
 import { Code } from '@radix-ui/themes'
 import type React from 'react'
 import { ChangeBase } from '../ChangeBase.js'

package/src/template/components/Changelog/groups/InputFieldDescription.tsx

@@ -1,4 +1,4 @@
-import type { GraphqlChange } from '#lib/graphql-change/index'
+import type { GraphqlChange } from '#lib/graphql-change'
 import { Code } from '@radix-ui/themes'
 import type React from 'react'
 import { ChangeBase } from '../ChangeBase.js'

package/src/template/components/Changelog/groups/InputFieldOperation.tsx

@@ -1,4 +1,4 @@
-import type { GraphqlChange } from '#lib/graphql-change/index'
+import type { GraphqlChange } from '#lib/graphql-change'
 import { Code } from '@radix-ui/themes'
 import type React from 'react'
 import { ChangeBase } from '../ChangeBase.js'

package/src/template/components/Changelog/groups/ObjectTypeInterfaceOperation.tsx

@@ -1,4 +1,4 @@
-import type { GraphqlChange } from '#lib/graphql-change/index'
+import type { GraphqlChange } from '#lib/graphql-change'
 import { Code } from '@radix-ui/themes'
 import type React from 'react'
 import { ChangeBase } from '../ChangeBase.js'

package/src/template/components/Changelog/groups/SchemaRootType.tsx

@@ -1,4 +1,4 @@
-import type { GraphqlChange } from '#lib/graphql-change/index'
+import type { GraphqlChange } from '#lib/graphql-change'
 import { Code } from '@radix-ui/themes'
 import type React from 'react'
 import { ChangeBase } from '../ChangeBase.js'

package/src/template/components/Changelog/groups/TypeDescription.tsx

@@ -1,4 +1,4 @@
-import type { GraphqlChange } from '#lib/graphql-change/index'
+import type { GraphqlChange } from '#lib/graphql-change'
 import { Code } from '@radix-ui/themes'
 import type React from 'react'
 import { ChangeBase } from '../ChangeBase.js'

package/src/template/components/Changelog/groups/TypeOperation.tsx

@@ -1,4 +1,4 @@
-import type { GraphqlChange } from '#lib/graphql-change/index'
+import type { GraphqlChange } from '#lib/graphql-change'
 import { Code } from '@radix-ui/themes'
 import type React from 'react'
 import { ChangeBase } from '../ChangeBase.js'

package/src/template/components/Changelog/groups/UnionMemberOperation.tsx

@@ -1,4 +1,4 @@
-import type { GraphqlChange } from '#lib/graphql-change/index'
+import type { GraphqlChange } from '#lib/graphql-change'
 import { Code } from '@radix-ui/themes'
 import type React from 'react'
 import { ChangeBase } from '../ChangeBase.js'

package/src/template/components/Changelog.tsx

@@ -1,7 +1,6 @@
-import type { Api } from '#api/index'
+import { GraphqlChange } from '#lib/graphql-change'
 import { CRITICALITY_LEVELS } from '#lib/graphql-change/criticality'
-import { GraphqlChange } from '#lib/graphql-change/index'
-import type { GraphqlChangeset } from '#lib/graphql-changeset/index'
+import { GraphqlChangeset } from '#lib/graphql-changeset'
 import type { CriticalityLevel } from '@graphql-inspector/core'
 import { Box } from '@radix-ui/themes'
 import React from 'react'
@@ -19,7 +18,7 @@ export const renderDate = (date: Date) => {
   })
 }
 
-export const Changelog: React.FC<{ changesets: Api.Schema.NonEmptyChangeSets }> = ({ changesets }) => {
+export const Changelog: React.FC<{ changesets: GraphqlChangeset.Changelog }> = ({ changesets }) => {
   return (
     <Box>
       {changesets.map(changeset => <Changeset key={changeset.date.toISOString()} changeset={changeset} />)}
@@ -38,12 +37,14 @@ const Changeset: React.FC<{ changeset: GraphqlChangeset.ChangeSet }> = ({ change
     })
 
     // Group changes
-    changeset.changes.forEach(change => {
-      const level = change.criticality.level
-      if (groups[level]) {
-        groups[level].push(change)
-      }
-    })
+    if (GraphqlChangeset.isIntermediateChangeSet(changeset)) {
+      changeset.changes.forEach(change => {
+        const level = change.criticality.level
+        if (groups[level]) {
+          groups[level].push(change)
+        }
+      })
+    }
 
     // Return only non-empty groups in order
     return CRITICALITY_LEVELS
@@ -52,7 +53,7 @@ const Changeset: React.FC<{ changeset: GraphqlChangeset.ChangeSet }> = ({ change
         level,
         changes: groups[level],
       }))
-  }, [changeset.changes])
+  }, [changeset])
 
   return (
     <Box mb='6'>
@@ -61,11 +62,11 @@ const Changeset: React.FC<{ changeset: GraphqlChangeset.ChangeSet }> = ({ change
       </h1>
       {groupedChanges.map(group => (
         <CriticalitySection key={group.level} level={group.level} changes={group.changes}>
-          {group.changes.map(change => {
+          {group.changes.map((change, index) => {
             const type = GraphqlChange.Group.getType(change)
             return (
               <ComponentDispatch
-                key={`${change.type}-${change.path || change.message}`}
+                key={`${change.type}-${change.path || change.message}-${index}`}
                 components={Group}
                 name={type}
                 props={{ change }}

package/src/template/components/DeprecationReason.tsx

@@ -1,9 +1,9 @@
-import type { GrafaidOld } from '#lib/grafaid-old/index'
+import type { React } from '#dep/react/index'
+import type { GrafaidOld } from '#lib/grafaid-old'
 import { Text } from '@radix-ui/themes'
-import type { FC } from 'react'
 import { Markdown } from './Markdown.js'
 
-export const DeprecationReason: FC<{ data: GrafaidOld.GraphQLField }> = ({ data }) => {
+export const DeprecationReason: React.FC<{ data: GrafaidOld.GraphQLField }> = ({ data }) => {
   if (!data.deprecationReason) return null
 
   return (

package/src/template/components/Description.tsx

@@ -1,11 +1,11 @@
+import type { React } from '#dep/react/index'
 import { Text } from '@radix-ui/themes'
-import type { FC } from 'react'
 import { Markdown } from './Markdown.js'
 // import type { Grafaid } from '#lib/grafaid'
-import type { GrafaidOld } from '#lib/grafaid-old/index'
+import type { GrafaidOld } from '#lib/grafaid-old'
 import type { GraphQLNamedType } from 'graphql'
 
-export const Description: FC<{ data: GraphQLNamedType | GrafaidOld.GraphQLField }> = ({ data }) => {
+export const Description: React.FC<{ data: GraphQLNamedType | GrafaidOld.GraphQLField }> = ({ data }) => {
   if (!data.description) return null
 
   return (

package/src/template/components/Field.tsx

@@ -1,26 +1,66 @@
-import { GrafaidOld } from '#lib/grafaid-old/index'
+import { Api } from '#api/iso'
+import type { React } from '#dep/react/index'
+import { GrafaidOld } from '#lib/grafaid-old'
+import { GraphQLPath } from '#lib/graphql-path'
+import { SchemaLifecycle } from '#lib/schema-lifecycle'
 import type { BoxProps } from '@radix-ui/themes'
-import { Box, Text } from '@radix-ui/themes'
-import type { FC } from 'react'
+import { Badge, Box, Text } from '@radix-ui/themes'
+import { useSchemaLifecycle } from '../contexts/SchemaLifecycleContext.js'
 import { ArgumentListAnnotation } from './ArgumentListAnnotation.js'
 import { DeprecationReason } from './DeprecationReason.js'
 import { Description } from './Description.js'
 import { TypeAnnotation } from './TypeAnnotation.js'
 
-export type Props = BoxProps & {
-  data: GrafaidOld.GraphQLField
-}
+export const Field: React.FC<
+  BoxProps & {
+    data: GrafaidOld.GraphQLField
+    parentTypeName?: string
+  }
+> = ({ data, parentTypeName, ...boxProps }) => {
+  const { lifecycle, currentVersion } = useSchemaLifecycle()
 
-export const Field: FC<Props> = ({ data, ...boxProps }) => {
   const argumentList = GrafaidOld.isOutputField(data)
     ? <ArgumentListAnnotation field={data} />
     : null
 
+  // Get field lifecycle information if available
+  let fieldLifecycle = null
+  let addedDate = null
+  let removedDate = null
+  let isAvailable = true
+
+  if (lifecycle && parentTypeName) {
+    const fieldPath = GraphQLPath.Definition.field(parentTypeName, data.name)
+    fieldLifecycle = SchemaLifecycle.getFieldLifecycle(lifecycle, fieldPath)
+    if (fieldLifecycle) {
+      addedDate = SchemaLifecycle.getFieldAddedDate(lifecycle, fieldPath)
+      removedDate = SchemaLifecycle.getFieldRemovedDate(lifecycle, fieldPath)
+      isAvailable = SchemaLifecycle.isFieldCurrentlyAvailable(lifecycle, fieldPath)
+    }
+  }
+
   return (
     <Box {...boxProps} id={data.name}>
       <Description data={data} />
       <DeprecationReason data={data} />
-      <Text weight='medium'>{data.name}</Text>
+      <Box style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
+        <Text weight='medium'>{data.name}</Text>
+        {addedDate && (
+          <Badge color='green' variant='soft' size='1'>
+            Added {Api.Schema.dateToVersionString(addedDate)}
+          </Badge>
+        )}
+        {removedDate && (
+          <Badge color='red' variant='soft' size='1'>
+            Removed {Api.Schema.dateToVersionString(removedDate)}
+          </Badge>
+        )}
+        {!isAvailable && (
+          <Badge color='orange' variant='soft' size='1'>
+            Not available in current version
+          </Badge>
+        )}
+      </Box>
       <Text>
         {argumentList}
         :{` `}

package/src/template/components/FieldList.tsx

@@ -1,13 +1,14 @@
-import { Grafaid } from '#lib/grafaid/index'
+import { Grafaid } from '#lib/grafaid'
 import { Box } from '@radix-ui/themes'
 import type { FC } from 'react'
 import { Field } from './Field.js'
 
 export interface Props {
   data: Grafaid.Schema.TypesLike.Named
+  parentTypeName?: string
 }
 
-export const FieldList: FC<Props> = ({ data }) => {
+export const FieldList: FC<Props> = ({ data, parentTypeName }) => {
   if (!Grafaid.Schema.TypesLike.isFielded(data)) return null
 
   const fields = Grafaid.Schema.NodesLike.getFields(data)
@@ -20,6 +21,7 @@ export const FieldList: FC<Props> = ({ data }) => {
           mt='3'
           key={field.name}
           data={field}
+          parentTypeName={parentTypeName ?? data.name}
         />
       ))}
     </Box>

package/src/template/components/FieldListSection.tsx

@@ -1,14 +1,10 @@
-import { Grafaid } from '#lib/grafaid/index'
+import type { React } from '#dep/react/index'
+import { Grafaid } from '#lib/grafaid'
 import { Box, Heading } from '@radix-ui/themes'
 import type { GraphQLNamedType } from 'graphql'
-import type { FC } from 'react'
 import { FieldList } from './FieldList.js'
 
-export interface Props {
-  data: GraphQLNamedType
-}
-
-export const FieldListSection: FC<Props> = ({ data }) => {
+export const FieldListSection: React.FC<{ data: GraphQLNamedType }> = ({ data }) => {
   if (!Grafaid.Schema.TypesLike.isFielded(data)) return null
 
   const fields = Grafaid.Schema.NodesLike.getFields(data)
@@ -17,7 +13,7 @@ export const FieldListSection: FC<Props> = ({ data }) => {
   return (
     <Box>
       <Heading>Fields</Heading>
-      <FieldList data={data} />
+      <FieldList data={data} parentTypeName={data.name} />
     </Box>
   )
 }

package/src/template/components/HamburgerMenu.tsx

@@ -10,6 +10,7 @@ export interface HamburgerMenuProps {
   onClose: () => void
   sidebarData: Content.Item[]
   basePath?: string
+  topContent?: React.ReactNode
 }
 
 export const HamburgerMenu: React.FC<HamburgerMenuProps> = ({
@@ -18,6 +19,7 @@ export const HamburgerMenu: React.FC<HamburgerMenuProps> = ({
   onClose,
   sidebarData,
   basePath,
+  topContent,
 }) => {
   // Prevent body scroll when mobile menu is open
   useEffect(() => {
@@ -89,7 +91,7 @@ export const HamburgerMenu: React.FC<HamburgerMenuProps> = ({
                 <Cross2Icon width='18' height='18' />
               </IconButton>
             </Flex>
-            <Sidebar data={sidebarData} basePath={basePath} />
+            <Sidebar data={sidebarData} basePath={basePath} topContent={topContent} />
           </Box>
         </>
       )}

package/src/template/components/MissingSchema.tsx

@@ -1,3 +1,5 @@
-export const MissingSchema = () => {
+import type { React } from '#dep/react/index'
+
+export const MissingSchema: React.FC = () => {
   return <div>No content to show. There is no schema to work with.</div>
 }

package/src/template/components/NamedType.tsx

@@ -1,6 +1,9 @@
-import { Box, Heading, Text } from '@radix-ui/themes'
+import { Api } from '#api/iso'
+import { SchemaLifecycle } from '#lib/schema-lifecycle'
+import { Badge, Box, Heading, Text } from '@radix-ui/themes'
 import { type GraphQLNamedType } from 'graphql'
 import type { FC } from 'react'
+import { useSchemaLifecycle } from '../contexts/SchemaLifecycleContext.js'
 import { FieldListSection } from './FieldListSection.js'
 import { Markdown } from './Markdown.js'
 
@@ -9,6 +12,8 @@ export interface Props {
 }
 
 export const NamedType: FC<Props> = ({ data }) => {
+  const { lifecycle, currentVersion } = useSchemaLifecycle()
+
   const description = data.description
     ? (
       <Text as='div' color='gray'>
@@ -16,9 +21,33 @@ export const NamedType: FC<Props> = ({ data }) => {
       </Text>
     )
     : null
+
+  // Get lifecycle information for this type
+  const typeLifecycle = lifecycle ? SchemaLifecycle.getTypeLifecycle(lifecycle, data.name) : null
+  const addedDate = lifecycle ? SchemaLifecycle.getTypeAddedDate(lifecycle, data.name) : null
+  const removedDate = lifecycle ? SchemaLifecycle.getTypeRemovedDate(lifecycle, data.name) : null
+  const isAvailable = lifecycle ? SchemaLifecycle.isTypeCurrentlyAvailable(lifecycle, data.name) : true
+
   return (
     <Box>
-      <Heading size='8'>{data.name}</Heading>
+      <Box style={{ display: 'flex', alignItems: 'center', gap: '8px', marginBottom: '8px' }}>
+        <Heading size='8'>{data.name}</Heading>
+        {addedDate && (
+          <Badge color='green' variant='soft' size='1'>
+            Added {Api.Schema.dateToVersionString(addedDate)}
+          </Badge>
+        )}
+        {removedDate && (
+          <Badge color='red' variant='soft' size='1'>
+            Removed {Api.Schema.dateToVersionString(removedDate)}
+          </Badge>
+        )}
+        {!isAvailable && (
+          <Badge color='orange' variant='soft' size='1'>
+            Not available in current version
+          </Badge>
+        )}
+      </Box>
       {description}
       <FieldListSection data={data} />
     </Box>

package/src/template/components/ReferenceLink.tsx

@@ -1,17 +1,8 @@
 import { Api } from '#api/iso'
-import type { ReactNode } from 'react'
+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
  *
@@ -19,7 +10,14 @@ 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()
 
   const path = Api.Schema.Routing.joinSegmentsAndPaths(

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
-}
-
 /**
  * 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 (

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'