polen 0.10.0-next.15 → 0.10.0-next.17

package/src/lib/graphql-document/positioning-simple.test.ts

@@ -32,7 +32,7 @@ describe('Simple Positioning Engine', () => {
     it('should wrap identifiers in spans', () => {
       const container = document.createElement('div')
       container.innerHTML = `
-        <pre class="shiki">
+        <pre class="code-block">
           <code>query GetUser {
   user {
     name
@@ -64,7 +64,7 @@ describe('Simple Positioning Engine', () => {
     it('should handle multiple identifiers in same line', () => {
       const container = document.createElement('div')
       container.innerHTML = `
-        <pre class="shiki">
+        <pre class="code-block">
           <code>query GetUserById($id: ID!) {</code>
         </pre>
       `
@@ -86,7 +86,7 @@ describe('Simple Positioning Engine', () => {
     it('should get positions of wrapped identifiers', () => {
       const container = document.createElement('div')
       container.innerHTML = `
-        <pre class="shiki">
+        <pre class="code-block">
           <code>
             <span class="line"><span data-graphql-id="0-user-Field" data-graphql-name="user" data-graphql-kind="Field" data-graphql-start="0" data-graphql-end="4" data-graphql-line="1" data-graphql-column="1" data-graphql-path="user">user</span> {</span>
           </code>
@@ -137,7 +137,7 @@ describe('Simple Positioning Engine', () => {
     it('should skip already wrapped identifiers', () => {
       const container = document.createElement('div')
       container.innerHTML = `
-        <pre class="shiki">
+        <pre class="code-block">
           <code><span data-graphql-id="existing">user</span> {</code>
         </pre>
       `
@@ -158,7 +158,7 @@ describe('Simple Positioning Engine', () => {
     it('should handle empty lines gracefully', () => {
       const container = document.createElement('div')
       container.innerHTML = `
-        <pre class="shiki">
+        <pre class="code-block">
           <code>query {
 
   user</code>

package/src/lib/graphql-document/positioning-simple.ts

@@ -32,7 +32,7 @@ export interface PositionResult {
 }
 
 /**
- * Simplified position calculator for Shiki-rendered code
+ * Simplified position calculator for syntax-highlighted code
  *
  * This version uses a more straightforward approach:
  * 1. Find the line element by line number

package/src/template/components/Changelog/ChangeBase.tsx

@@ -0,0 +1,15 @@
+import type { GraphqlChange } from '#lib/graphql-change/index'
+import type React from 'react'
+
+interface ChangeBaseProps {
+  change: GraphqlChange.Change
+  children: React.ReactNode
+}
+
+export const ChangeBase: React.FC<ChangeBaseProps> = ({ change, children }) => {
+  return (
+    <li style={{ marginBottom: '0.5rem' }}>
+      {children}
+    </li>
+  )
+}

package/src/template/components/Changelog/CriticalitySection.tsx

@@ -0,0 +1,29 @@
+import { CRITICALITY_CONFIG, type CriticalityLevel } from '#lib/graphql-change/criticality'
+import type { GraphqlChange } from '#lib/graphql-change/index'
+import { Heading } from '@radix-ui/themes'
+import type React from 'react'
+
+interface CriticalitySectionProps {
+  level: CriticalityLevel
+  changes: GraphqlChange.Change[]
+  children: React.ReactNode
+}
+
+export const CriticalitySection: React.FC<CriticalitySectionProps> = ({ level, changes, children }) => {
+  if (changes.length === 0) {
+    return null
+  }
+
+  const config = CRITICALITY_CONFIG[level]
+
+  return (
+    <section>
+      <Heading as='h3' size='4' mb='3'>
+        {config.label}
+      </Heading>
+      <ul style={{ listStyle: 'none', paddingLeft: 0, margin: 0 }}>
+        {children}
+      </ul>
+    </section>
+  )
+}

package/src/template/components/Changelog/changes/index.ts

@@ -0,0 +1 @@
+export { ChangeBase } from '../ChangeBase.js'

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

@@ -0,0 +1,25 @@
+import type { GraphqlChange } from '#lib/graphql-change/index'
+import { Code } from '@radix-ui/themes'
+import type React from 'react'
+import { ChangeBase } from '../ChangeBase.js'
+
+export const DirectiveArgument: React.FC<{ change: GraphqlChange.Group.DirectiveArgument }> = ({ change }) => {
+  switch (change.type) {
+    case `DIRECTIVE_ARGUMENT_DEFAULT_VALUE_CHANGED`:
+      return (
+        <ChangeBase change={change}>
+          Changed default value for directive <Code>@{change.meta.directiveName}</Code> argument{' '}
+          <Code>{change.meta.directiveArgumentName}</Code>
+        </ChangeBase>
+      )
+    case `DIRECTIVE_ARGUMENT_TYPE_CHANGED`:
+      return (
+        <ChangeBase change={change}>
+          Changed directive <Code>@{change.meta.directiveName}</Code> argument{' '}
+          <Code>{change.meta.directiveArgumentName}</Code> type from <Code>{change.meta.oldDirectiveArgumentType}</Code>
+          {' '}
+          to <Code>{change.meta.newDirectiveArgumentType}</Code>
+        </ChangeBase>
+      )
+  }
+}

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

@@ -0,0 +1,15 @@
+import type { GraphqlChange } from '#lib/graphql-change/index'
+import { Code } from '@radix-ui/themes'
+import type React from 'react'
+import { ChangeBase } from '../ChangeBase.js'
+
+export const DirectiveArgumentDescription: React.FC<{ change: GraphqlChange.Group.DirectiveArgumentDescription }> = (
+  { change },
+) => {
+  return (
+    <ChangeBase change={change}>
+      Changed description for directive <Code>@{change.meta.directiveName}</Code> argument{' '}
+      <Code>{change.meta.directiveArgumentName}</Code>
+    </ChangeBase>
+  )
+}

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

@@ -0,0 +1,25 @@
+import type { GraphqlChange } from '#lib/graphql-change/index'
+import { Code } from '@radix-ui/themes'
+import type React from 'react'
+import { ChangeBase } from '../ChangeBase.js'
+
+export const DirectiveArgumentOperation: React.FC<{ change: GraphqlChange.Group.DirectiveArgumentOperation }> = (
+  { change },
+) => {
+  switch (change.type) {
+    case `DIRECTIVE_ARGUMENT_ADDED`:
+      return (
+        <ChangeBase change={change}>
+          Added argument <Code>{change.meta.addedDirectiveArgumentName}</Code> to directive{' '}
+          <Code>@{change.meta.directiveName}</Code>
+        </ChangeBase>
+      )
+    case `DIRECTIVE_ARGUMENT_REMOVED`:
+      return (
+        <ChangeBase change={change}>
+          Removed argument <Code>{change.meta.removedDirectiveArgumentName}</Code> from directive{' '}
+          <Code>@{change.meta.directiveName}</Code>
+        </ChangeBase>
+      )
+  }
+}

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

@@ -0,0 +1,12 @@
+import type { GraphqlChange } from '#lib/graphql-change/index'
+import { Code } from '@radix-ui/themes'
+import type React from 'react'
+import { ChangeBase } from '../ChangeBase.js'
+
+export const DirectiveDescription: React.FC<{ change: GraphqlChange.Group.DirectiveDescription }> = ({ change }) => {
+  return (
+    <ChangeBase change={change}>
+      Changed description for directive <Code>@{change.meta.directiveName}</Code>
+    </ChangeBase>
+  )
+}

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

@@ -0,0 +1,25 @@
+import type { GraphqlChange } from '#lib/graphql-change/index'
+import { Code } from '@radix-ui/themes'
+import type React from 'react'
+import { ChangeBase } from '../ChangeBase.js'
+
+export const DirectiveLocationOperation: React.FC<{ change: GraphqlChange.Group.DirectiveLocationOperation }> = (
+  { change },
+) => {
+  switch (change.type) {
+    case `DIRECTIVE_LOCATION_ADDED`:
+      return (
+        <ChangeBase change={change}>
+          Directive <Code>@{change.meta.directiveName}</Code> can now be used on{' '}
+          <Code>{change.meta.addedDirectiveLocation}</Code>
+        </ChangeBase>
+      )
+    case `DIRECTIVE_LOCATION_REMOVED`:
+      return (
+        <ChangeBase change={change}>
+          Directive <Code>@{change.meta.directiveName}</Code> can no longer be used on{' '}
+          <Code>{change.meta.removedDirectiveLocation}</Code>
+        </ChangeBase>
+      )
+  }
+}

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

@@ -0,0 +1,21 @@
+import type { GraphqlChange } from '#lib/graphql-change/index'
+import { Code } from '@radix-ui/themes'
+import type React from 'react'
+import { ChangeBase } from '../ChangeBase.js'
+
+export const DirectiveOperation: React.FC<{ change: GraphqlChange.Group.DirectiveOperation }> = ({ change }) => {
+  switch (change.type) {
+    case `DIRECTIVE_ADDED`:
+      return (
+        <ChangeBase change={change}>
+          Added directive <Code>@{change.meta.addedDirectiveName}</Code>
+        </ChangeBase>
+      )
+    case `DIRECTIVE_REMOVED`:
+      return (
+        <ChangeBase change={change}>
+          Removed directive <Code>@{change.meta.removedDirectiveName}</Code>
+        </ChangeBase>
+      )
+  }
+}

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

@@ -0,0 +1,137 @@
+import type { GraphqlChange } from '#lib/graphql-change/index'
+import { Code } from '@radix-ui/themes'
+import type React from 'react'
+import { ChangeBase } from '../ChangeBase.js'
+
+export const DirectiveUsage: React.FC<{ change: GraphqlChange.Group.DirectiveUsage }> = ({ change }) => {
+  const isAdded = change.type.includes(`_ADDED`)
+  const action = isAdded ? `Added` : `Removed`
+  const preposition = isAdded ? `to` : `from`
+
+  // Helper to get the directive name based on whether it's added or removed
+  const getDirectiveName = () => {
+    if (`addedDirectiveName` in change.meta) {
+      return change.meta.addedDirectiveName
+    }
+    if (`removedDirectiveName` in change.meta) {
+      return change.meta.removedDirectiveName
+    }
+    return ``
+  }
+
+  const directiveName = getDirectiveName()
+
+  switch (change.type) {
+    case `DIRECTIVE_USAGE_UNION_MEMBER_ADDED`:
+      return (
+        <ChangeBase change={change}>
+          {action} directive <Code>@{directiveName}</Code> {preposition} union member{' '}
+          <Code>{change.meta.addedUnionMemberTypeName}</Code> on union <Code>{change.meta.unionName}</Code>
+        </ChangeBase>
+      )
+    case `DIRECTIVE_USAGE_UNION_MEMBER_REMOVED`:
+      return (
+        <ChangeBase change={change}>
+          {action} directive <Code>@{directiveName}</Code> {preposition} union member{' '}
+          <Code>{change.meta.removedUnionMemberTypeName}</Code> on union <Code>{change.meta.unionName}</Code>
+        </ChangeBase>
+      )
+
+    case `DIRECTIVE_USAGE_ENUM_ADDED`:
+    case `DIRECTIVE_USAGE_ENUM_REMOVED`:
+      return (
+        <ChangeBase change={change}>
+          {action} directive <Code>@{directiveName}</Code> {preposition} enum <Code>{change.meta.enumName}</Code>
+        </ChangeBase>
+      )
+
+    case `DIRECTIVE_USAGE_ENUM_VALUE_ADDED`:
+    case `DIRECTIVE_USAGE_ENUM_VALUE_REMOVED`:
+      return (
+        <ChangeBase change={change}>
+          {action} directive <Code>@{directiveName}</Code> {preposition} enum value{' '}
+          <Code>{change.meta.enumValueName}</Code> on <Code>{change.meta.enumName}</Code>
+        </ChangeBase>
+      )
+
+    case `DIRECTIVE_USAGE_INPUT_OBJECT_ADDED`:
+    case `DIRECTIVE_USAGE_INPUT_OBJECT_REMOVED`:
+      return (
+        <ChangeBase change={change}>
+          {action} directive <Code>@{directiveName}</Code> {preposition} input object{' '}
+          <Code>{change.meta.inputObjectName}</Code>
+        </ChangeBase>
+      )
+
+    case `DIRECTIVE_USAGE_FIELD_ADDED`:
+    case `DIRECTIVE_USAGE_FIELD_REMOVED`:
+      return (
+        <ChangeBase change={change}>
+          {action} directive <Code>@{directiveName}</Code> {preposition} field <Code>{change.meta.fieldName}</Code> on
+          {' '}
+          <Code>{change.meta.typeName}</Code>
+        </ChangeBase>
+      )
+
+    case `DIRECTIVE_USAGE_SCALAR_ADDED`:
+    case `DIRECTIVE_USAGE_SCALAR_REMOVED`:
+      return (
+        <ChangeBase change={change}>
+          {action} directive <Code>@{directiveName}</Code> {preposition} scalar <Code>{change.meta.scalarName}</Code>
+        </ChangeBase>
+      )
+
+    case `DIRECTIVE_USAGE_OBJECT_ADDED`:
+    case `DIRECTIVE_USAGE_OBJECT_REMOVED`:
+      return (
+        <ChangeBase change={change}>
+          {action} directive <Code>@{directiveName}</Code> {preposition} object <Code>{change.meta.objectName}</Code>
+        </ChangeBase>
+      )
+
+    case `DIRECTIVE_USAGE_INTERFACE_ADDED`:
+    case `DIRECTIVE_USAGE_INTERFACE_REMOVED`:
+      return (
+        <ChangeBase change={change}>
+          {action} directive <Code>@{directiveName}</Code> {preposition} interface{' '}
+          <Code>{change.meta.interfaceName}</Code>
+        </ChangeBase>
+      )
+
+    case `DIRECTIVE_USAGE_ARGUMENT_DEFINITION_ADDED`:
+    case `DIRECTIVE_USAGE_ARGUMENT_DEFINITION_REMOVED`:
+      return (
+        <ChangeBase change={change}>
+          {action} directive <Code>@{directiveName}</Code> {preposition} argument{' '}
+          <Code>{change.meta.argumentName}</Code> on <Code>{change.meta.fieldName}</Code> field on{' '}
+          <Code>{change.meta.typeName}</Code>
+        </ChangeBase>
+      )
+
+    case `DIRECTIVE_USAGE_SCHEMA_ADDED`:
+    case `DIRECTIVE_USAGE_SCHEMA_REMOVED`:
+      return (
+        <ChangeBase change={change}>
+          {action} directive <Code>@{directiveName}</Code> {preposition} schema
+        </ChangeBase>
+      )
+
+    case `DIRECTIVE_USAGE_FIELD_DEFINITION_ADDED`:
+    case `DIRECTIVE_USAGE_FIELD_DEFINITION_REMOVED`:
+      return (
+        <ChangeBase change={change}>
+          {action} directive <Code>@{directiveName}</Code> {preposition} field definition{' '}
+          <Code>{change.meta.fieldName}</Code> on <Code>{change.meta.typeName}</Code>
+        </ChangeBase>
+      )
+
+    case `DIRECTIVE_USAGE_INPUT_FIELD_DEFINITION_ADDED`:
+    case `DIRECTIVE_USAGE_INPUT_FIELD_DEFINITION_REMOVED`:
+      return (
+        <ChangeBase change={change}>
+          {action} directive <Code>@{directiveName}</Code> {preposition} input field{' '}
+          <Code>{change.meta.inputFieldName}</Code> on <Code>{change.meta.inputObjectName}</Code>
+        </ChangeBase>
+      )
+  }
+}

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

@@ -0,0 +1,32 @@
+import type { GraphqlChange } from '#lib/graphql-change/index'
+import { Code } from '@radix-ui/themes'
+import type React from 'react'
+import { ChangeBase } from '../ChangeBase.js'
+
+export const EnumValueDeprecationReason: React.FC<{ change: GraphqlChange.Group.EnumValueDeprecationReason }> = (
+  { change },
+) => {
+  switch (change.type) {
+    case `ENUM_VALUE_DEPRECATION_REASON_ADDED`:
+      return (
+        <ChangeBase change={change}>
+          Deprecated enum value <Code>{change.meta.enumValueName}</Code> on <Code>{change.meta.enumName}</Code>
+          {change.meta.addedValueDeprecationReason && <>: "{change.meta.addedValueDeprecationReason}"</>}
+        </ChangeBase>
+      )
+    case `ENUM_VALUE_DEPRECATION_REASON_REMOVED`:
+      return (
+        <ChangeBase change={change}>
+          Removed deprecation from enum value <Code>{change.meta.enumValueName}</Code> on{' '}
+          <Code>{change.meta.enumName}</Code>
+        </ChangeBase>
+      )
+    case `ENUM_VALUE_DEPRECATION_REASON_CHANGED`:
+      return (
+        <ChangeBase change={change}>
+          Changed deprecation reason for enum value <Code>{change.meta.enumValueName}</Code> on{' '}
+          <Code>{change.meta.enumName}</Code>
+        </ChangeBase>
+      )
+  }
+}

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

@@ -0,0 +1,12 @@
+import type { GraphqlChange } from '#lib/graphql-change/index'
+import { Code } from '@radix-ui/themes'
+import type React from 'react'
+import { ChangeBase } from '../ChangeBase.js'
+
+export const EnumValueDescription: React.FC<{ change: GraphqlChange.Group.EnumValueDescription }> = ({ change }) => {
+  return (
+    <ChangeBase change={change}>
+      Changed description for enum value <Code>{change.meta.enumValueName}</Code> on <Code>{change.meta.enumName}</Code>
+    </ChangeBase>
+  )
+}

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

@@ -0,0 +1,21 @@
+import type { GraphqlChange } from '#lib/graphql-change/index'
+import { Code } from '@radix-ui/themes'
+import type React from 'react'
+import { ChangeBase } from '../ChangeBase.js'
+
+export const EnumValueOperation: React.FC<{ change: GraphqlChange.Group.EnumValueOperation }> = ({ change }) => {
+  switch (change.type) {
+    case `ENUM_VALUE_ADDED`:
+      return (
+        <ChangeBase change={change}>
+          Added value <Code>{change.meta.addedEnumValueName}</Code> to enum <Code>{change.meta.enumName}</Code>
+        </ChangeBase>
+      )
+    case `ENUM_VALUE_REMOVED`:
+      return (
+        <ChangeBase change={change}>
+          Removed value <Code>{change.meta.removedEnumValueName}</Code> from enum <Code>{change.meta.enumName}</Code>
+        </ChangeBase>
+      )
+  }
+}

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

@@ -0,0 +1,26 @@
+import type { GraphqlChange } from '#lib/graphql-change/index'
+import { Code } from '@radix-ui/themes'
+import type React from 'react'
+import { ChangeBase } from '../ChangeBase.js'
+
+export const FieldArgument: React.FC<{ change: GraphqlChange.Group.FieldArgument }> = ({ change }) => {
+  switch (change.type) {
+    case `FIELD_ARGUMENT_DEFAULT_CHANGED`:
+      return (
+        <ChangeBase change={change}>
+          Changed default value for argument <Code>{change.meta.argumentName}</Code> on field{' '}
+          <Code>{change.meta.fieldName}</Code> on <Code>{change.meta.typeName}</Code> from{' '}
+          <Code>{change.meta.oldDefaultValue}</Code> to <Code>{change.meta.newDefaultValue}</Code>
+        </ChangeBase>
+      )
+    case `FIELD_ARGUMENT_TYPE_CHANGED`:
+      return (
+        <ChangeBase change={change}>
+          Changed argument <Code>{change.meta.argumentName}</Code> type from <Code>{change.meta.oldArgumentType}</Code>
+          {' '}
+          to <Code>{change.meta.newArgumentType}</Code> on field <Code>{change.meta.fieldName}</Code> on{' '}
+          <Code>{change.meta.typeName}</Code>
+        </ChangeBase>
+      )
+  }
+}

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

@@ -0,0 +1,15 @@
+import type { GraphqlChange } from '#lib/graphql-change/index'
+import { Code } from '@radix-ui/themes'
+import type React from 'react'
+import { ChangeBase } from '../ChangeBase.js'
+
+export const FieldArgumentDescription: React.FC<{ change: GraphqlChange.Group.FieldArgumentDescription }> = (
+  { change },
+) => {
+  return (
+    <ChangeBase change={change}>
+      Changed description for argument <Code>{change.meta.argumentName}</Code> on field{' '}
+      <Code>{change.meta.fieldName}</Code> on <Code>{change.meta.typeName}</Code>
+    </ChangeBase>
+  )
+}

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

@@ -0,0 +1,26 @@
+import type { GraphqlChange } from '#lib/graphql-change/index'
+import { Code } from '@radix-ui/themes'
+import type React from 'react'
+import { ChangeBase } from '../ChangeBase.js'
+
+export const FieldArgumentOperation: React.FC<{ change: GraphqlChange.Group.FieldArgumentOperation }> = (
+  { change },
+) => {
+  switch (change.type) {
+    case `FIELD_ARGUMENT_ADDED`:
+      return (
+        <ChangeBase change={change}>
+          Added argument <Code>{change.meta.addedArgumentName}</Code> to field <Code>{change.meta.fieldName}</Code> on
+          {' '}
+          <Code>{change.meta.typeName}</Code>
+        </ChangeBase>
+      )
+    case `FIELD_ARGUMENT_REMOVED`:
+      return (
+        <ChangeBase change={change}>
+          Removed argument <Code>{change.meta.removedFieldArgumentName}</Code> from field{' '}
+          <Code>{change.meta.fieldName}</Code> on <Code>{change.meta.typeName}</Code>
+        </ChangeBase>
+      )
+  }
+}

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

@@ -0,0 +1,21 @@
+import type { GraphqlChange } from '#lib/graphql-change/index'
+import { Code } from '@radix-ui/themes'
+import type React from 'react'
+import { ChangeBase } from '../ChangeBase.js'
+
+export const FieldDeprecation: React.FC<{ change: GraphqlChange.Group.FieldDeprecation }> = ({ change }) => {
+  switch (change.type) {
+    case `FIELD_DEPRECATION_ADDED`:
+      return (
+        <ChangeBase change={change}>
+          Deprecated field <Code>{change.meta.fieldName}</Code> on <Code>{change.meta.typeName}</Code>
+        </ChangeBase>
+      )
+    case `FIELD_DEPRECATION_REMOVED`:
+      return (
+        <ChangeBase change={change}>
+          Removed deprecation from field <Code>{change.meta.fieldName}</Code> on <Code>{change.meta.typeName}</Code>
+        </ChangeBase>
+      )
+  }
+}

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

@@ -0,0 +1,33 @@
+import type { GraphqlChange } from '#lib/graphql-change/index'
+import { Code } from '@radix-ui/themes'
+import type React from 'react'
+import { ChangeBase } from '../ChangeBase.js'
+
+export const FieldDeprecationReason: React.FC<{ change: GraphqlChange.Group.FieldDeprecationReason }> = (
+  { change },
+) => {
+  switch (change.type) {
+    case `FIELD_DEPRECATION_REASON_ADDED`:
+      return (
+        <ChangeBase change={change}>
+          Added deprecation reason to field <Code>{change.meta.fieldName}</Code> on <Code>{change.meta.typeName}</Code>
+          {change.meta.addedDeprecationReason && <>: "{change.meta.addedDeprecationReason}"</>}
+        </ChangeBase>
+      )
+    case `FIELD_DEPRECATION_REASON_REMOVED`:
+      return (
+        <ChangeBase change={change}>
+          Removed deprecation reason from field <Code>{change.meta.fieldName}</Code> on{' '}
+          <Code>{change.meta.typeName}</Code>
+        </ChangeBase>
+      )
+    case `FIELD_DEPRECATION_REASON_CHANGED`:
+      return (
+        <ChangeBase change={change}>
+          Changed deprecation reason for field <Code>{change.meta.fieldName}</Code> on{' '}
+          <Code>{change.meta.typeName}</Code> from <Code>{change.meta.oldDeprecationReason}</Code> to{' '}
+          <Code>{change.meta.newDeprecationReason}</Code>
+        </ChangeBase>
+      )
+  }
+}

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

@@ -0,0 +1,27 @@
+import type { GraphqlChange } from '#lib/graphql-change/index'
+import { Code } from '@radix-ui/themes'
+import type React from 'react'
+import { ChangeBase } from '../ChangeBase.js'
+
+export const FieldDescription: React.FC<{ change: GraphqlChange.Group.FieldDescription }> = ({ change }) => {
+  switch (change.type) {
+    case `FIELD_DESCRIPTION_ADDED`:
+      return (
+        <ChangeBase change={change}>
+          Added description to field <Code>{change.meta.fieldName}</Code> on <Code>{change.meta.typeName}</Code>
+        </ChangeBase>
+      )
+    case `FIELD_DESCRIPTION_REMOVED`:
+      return (
+        <ChangeBase change={change}>
+          Removed description from field <Code>{change.meta.fieldName}</Code> on <Code>{change.meta.typeName}</Code>
+        </ChangeBase>
+      )
+    case `FIELD_DESCRIPTION_CHANGED`:
+      return (
+        <ChangeBase change={change}>
+          Changed description for field <Code>{change.meta.fieldName}</Code> on <Code>{change.meta.typeName}</Code>
+        </ChangeBase>
+      )
+  }
+}

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

@@ -0,0 +1,28 @@
+import type { GraphqlChange } from '#lib/graphql-change/index'
+import { Code } from '@radix-ui/themes'
+import type React from 'react'
+import { ChangeBase } from '../ChangeBase.js'
+
+export const FieldOperation: React.FC<{ change: GraphqlChange.Group.FieldOperation }> = ({ change }) => {
+  switch (change.type) {
+    case `FIELD_ADDED`:
+      return (
+        <ChangeBase change={change}>
+          Added field <Code>{change.meta.addedFieldName}</Code> to <Code>{change.meta.typeName}</Code>
+        </ChangeBase>
+      )
+    case `FIELD_REMOVED`:
+      return (
+        <ChangeBase change={change}>
+          Removed field <Code>{change.meta.removedFieldName}</Code> from <Code>{change.meta.typeName}</Code>
+        </ChangeBase>
+      )
+    case `FIELD_TYPE_CHANGED`:
+      return (
+        <ChangeBase change={change}>
+          Changed field <Code>{change.meta.fieldName}</Code> type from <Code>{change.meta.oldFieldType}</Code> to{' '}
+          <Code>{change.meta.newFieldType}</Code> on <Code>{change.meta.typeName}</Code>
+        </ChangeBase>
+      )
+  }
+}

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

@@ -0,0 +1,16 @@
+import type { GraphqlChange } from '#lib/graphql-change/index'
+import { Code } from '@radix-ui/themes'
+import type React from 'react'
+import { ChangeBase } from '../ChangeBase.js'
+
+export const InputFieldDefaultValue: React.FC<{ change: GraphqlChange.Group.InputFieldDefaultValue }> = (
+  { change },
+) => {
+  return (
+    <ChangeBase change={change}>
+      Changed default value for input field <Code>{change.meta.inputFieldName}</Code> on{' '}
+      <Code>{change.meta.inputName}</Code> from <Code>{change.meta.oldDefaultValue}</Code> to{' '}
+      <Code>{change.meta.newDefaultValue}</Code>
+    </ChangeBase>
+  )
+}