polen 0.10.0-next.15 → 0.10.0-next.16

package/src/lib/graphql-change/change-types.ts

@@ -0,0 +1,203 @@
+// dprint-ignore-file
+import type { GraphqlInspector } from '#dep/graphql-inspector/index'
+
+/**
+ * Additional properties that Polen adds to GraphQL Inspector changes
+ */
+export interface ChangeExtensions {
+  message: string
+  path?: string
+  criticality: GraphqlInspector.Core.Criticality
+}
+
+// Type changes
+export interface TypeAddedChange extends GraphqlInspector.Core.TypeAddedChange, ChangeExtensions {}
+export interface TypeRemovedChange extends GraphqlInspector.Core.TypeRemovedChange, ChangeExtensions {}
+export interface TypeKindChangedChange extends GraphqlInspector.Core.TypeKindChangedChange, ChangeExtensions {}
+export interface TypeDescriptionChangedChange extends GraphqlInspector.Core.TypeDescriptionChangedChange, ChangeExtensions {}
+export interface TypeDescriptionAddedChange extends GraphqlInspector.Core.TypeDescriptionAddedChange, ChangeExtensions {}
+export interface TypeDescriptionRemovedChange extends GraphqlInspector.Core.TypeDescriptionRemovedChange, ChangeExtensions {}
+
+// Field changes
+export interface FieldAddedChange extends GraphqlInspector.Core.FieldAddedChange, ChangeExtensions {}
+export interface FieldRemovedChange extends GraphqlInspector.Core.FieldRemovedChange, ChangeExtensions {}
+export interface FieldTypeChangedChange extends GraphqlInspector.Core.FieldTypeChangedChange, ChangeExtensions {}
+// Note: GraphQL Inspector doesn't have FieldDeprecatedChange, it's handled by FieldDeprecationAddedChange
+export interface FieldDeprecationAddedChange extends GraphqlInspector.Core.FieldDeprecationAddedChange, ChangeExtensions {}
+export interface FieldDeprecationRemovedChange extends GraphqlInspector.Core.FieldDeprecationRemovedChange, ChangeExtensions {}
+export interface FieldDeprecationReasonChangedChange extends GraphqlInspector.Core.FieldDeprecationReasonChangedChange, ChangeExtensions {}
+export interface FieldDeprecationReasonAddedChange extends GraphqlInspector.Core.FieldDeprecationReasonAddedChange, ChangeExtensions {}
+export interface FieldDeprecationReasonRemovedChange extends GraphqlInspector.Core.FieldDeprecationReasonRemovedChange, ChangeExtensions {}
+export interface FieldDescriptionChangedChange extends GraphqlInspector.Core.FieldDescriptionChangedChange, ChangeExtensions {}
+export interface FieldDescriptionAddedChange extends GraphqlInspector.Core.FieldDescriptionAddedChange, ChangeExtensions {}
+export interface FieldDescriptionRemovedChange extends GraphqlInspector.Core.FieldDescriptionRemovedChange, ChangeExtensions {}
+
+// Field argument changes
+export interface FieldArgumentAddedChange extends GraphqlInspector.Core.FieldArgumentAddedChange, ChangeExtensions {}
+export interface FieldArgumentRemovedChange extends GraphqlInspector.Core.FieldArgumentRemovedChange, ChangeExtensions {}
+export interface FieldArgumentTypeChangedChange extends GraphqlInspector.Core.FieldArgumentTypeChangedChange, ChangeExtensions {}
+export interface FieldArgumentDescriptionChangedChange extends GraphqlInspector.Core.FieldArgumentDescriptionChangedChange, ChangeExtensions {}
+export interface FieldArgumentDefaultChangedChange extends GraphqlInspector.Core.FieldArgumentDefaultChangedChange, ChangeExtensions {}
+
+// Enum changes
+export interface EnumValueAddedChange extends GraphqlInspector.Core.EnumValueAddedChange, ChangeExtensions {}
+export interface EnumValueRemovedChange extends GraphqlInspector.Core.EnumValueRemovedChange, ChangeExtensions {}
+export interface EnumValueDescriptionChangedChange extends GraphqlInspector.Core.EnumValueDescriptionChangedChange, ChangeExtensions {}
+export interface EnumValueDeprecationReasonAddedChange extends GraphqlInspector.Core.EnumValueDeprecationReasonAddedChange, ChangeExtensions {}
+export interface EnumValueDeprecationReasonChangedChange extends GraphqlInspector.Core.EnumValueDeprecationReasonChangedChange, ChangeExtensions {}
+export interface EnumValueDeprecationReasonRemovedChange extends GraphqlInspector.Core.EnumValueDeprecationReasonRemovedChange, ChangeExtensions {}
+
+// Input field changes
+export interface InputFieldAddedChange extends GraphqlInspector.Core.InputFieldAddedChange, ChangeExtensions {}
+export interface InputFieldRemovedChange extends GraphqlInspector.Core.InputFieldRemovedChange, ChangeExtensions {}
+export interface InputFieldTypeChangedChange extends GraphqlInspector.Core.InputFieldTypeChangedChange, ChangeExtensions {}
+export interface InputFieldDescriptionAddedChange extends GraphqlInspector.Core.InputFieldDescriptionAddedChange, ChangeExtensions {}
+export interface InputFieldDescriptionRemovedChange extends GraphqlInspector.Core.InputFieldDescriptionRemovedChange, ChangeExtensions {}
+export interface InputFieldDescriptionChangedChange extends GraphqlInspector.Core.InputFieldDescriptionChangedChange, ChangeExtensions {}
+export interface InputFieldDefaultValueChangedChange extends GraphqlInspector.Core.InputFieldDefaultValueChangedChange, ChangeExtensions {}
+
+// Union changes
+export interface UnionMemberAddedChange extends GraphqlInspector.Core.UnionMemberAddedChange, ChangeExtensions {}
+export interface UnionMemberRemovedChange extends GraphqlInspector.Core.UnionMemberRemovedChange, ChangeExtensions {}
+
+// Interface changes
+export interface ObjectTypeInterfaceAddedChange extends GraphqlInspector.Core.ObjectTypeInterfaceAddedChange, ChangeExtensions {}
+export interface ObjectTypeInterfaceRemovedChange extends GraphqlInspector.Core.ObjectTypeInterfaceRemovedChange, ChangeExtensions {}
+
+// Directive changes
+export interface DirectiveAddedChange extends GraphqlInspector.Core.DirectiveAddedChange, ChangeExtensions {}
+export interface DirectiveRemovedChange extends GraphqlInspector.Core.DirectiveRemovedChange, ChangeExtensions {}
+export interface DirectiveDescriptionChangedChange extends GraphqlInspector.Core.DirectiveDescriptionChangedChange, ChangeExtensions {}
+export interface DirectiveLocationAddedChange extends GraphqlInspector.Core.DirectiveLocationAddedChange, ChangeExtensions {}
+export interface DirectiveLocationRemovedChange extends GraphqlInspector.Core.DirectiveLocationRemovedChange, ChangeExtensions {}
+export interface DirectiveArgumentAddedChange extends GraphqlInspector.Core.DirectiveArgumentAddedChange, ChangeExtensions {}
+export interface DirectiveArgumentRemovedChange extends GraphqlInspector.Core.DirectiveArgumentRemovedChange, ChangeExtensions {}
+export interface DirectiveArgumentDescriptionChangedChange extends GraphqlInspector.Core.DirectiveArgumentDescriptionChangedChange, ChangeExtensions {}
+export interface DirectiveArgumentDefaultValueChangedChange extends GraphqlInspector.Core.DirectiveArgumentDefaultValueChangedChange, ChangeExtensions {}
+export interface DirectiveArgumentTypeChangedChange extends GraphqlInspector.Core.DirectiveArgumentTypeChangedChange, ChangeExtensions {}
+
+// Schema changes
+export interface SchemaQueryTypeChangedChange extends GraphqlInspector.Core.SchemaQueryTypeChangedChange, ChangeExtensions {}
+export interface SchemaMutationTypeChangedChange extends GraphqlInspector.Core.SchemaMutationTypeChangedChange, ChangeExtensions {}
+export interface SchemaSubscriptionTypeChangedChange extends GraphqlInspector.Core.SchemaSubscriptionTypeChangedChange, ChangeExtensions {}
+
+// Directive usage changes
+export interface DirectiveUsageUnionMemberAddedChange extends GraphqlInspector.Core.DirectiveUsageUnionMemberAddedChange, ChangeExtensions {}
+export interface DirectiveUsageUnionMemberRemovedChange extends GraphqlInspector.Core.DirectiveUsageUnionMemberRemovedChange, ChangeExtensions {}
+export interface DirectiveUsageEnumAddedChange extends GraphqlInspector.Core.DirectiveUsageEnumAddedChange, ChangeExtensions {}
+export interface DirectiveUsageEnumRemovedChange extends GraphqlInspector.Core.DirectiveUsageEnumRemovedChange, ChangeExtensions {}
+export interface DirectiveUsageEnumValueAddedChange extends GraphqlInspector.Core.DirectiveUsageEnumValueAddedChange, ChangeExtensions {}
+export interface DirectiveUsageEnumValueRemovedChange extends GraphqlInspector.Core.DirectiveUsageEnumValueRemovedChange, ChangeExtensions {}
+export interface DirectiveUsageInputObjectAddedChange extends GraphqlInspector.Core.DirectiveUsageInputObjectAddedChange, ChangeExtensions {}
+export interface DirectiveUsageInputObjectRemovedChange extends GraphqlInspector.Core.DirectiveUsageInputObjectRemovedChange, ChangeExtensions {}
+export interface DirectiveUsageFieldAddedChange extends GraphqlInspector.Core.DirectiveUsageFieldAddedChange, ChangeExtensions {}
+export interface DirectiveUsageFieldRemovedChange extends GraphqlInspector.Core.DirectiveUsageFieldRemovedChange, ChangeExtensions {}
+export interface DirectiveUsageScalarAddedChange extends GraphqlInspector.Core.DirectiveUsageScalarAddedChange, ChangeExtensions {}
+export interface DirectiveUsageScalarRemovedChange extends GraphqlInspector.Core.DirectiveUsageScalarRemovedChange, ChangeExtensions {}
+export interface DirectiveUsageObjectAddedChange extends GraphqlInspector.Core.DirectiveUsageObjectAddedChange, ChangeExtensions {}
+export interface DirectiveUsageObjectRemovedChange extends GraphqlInspector.Core.DirectiveUsageObjectRemovedChange, ChangeExtensions {}
+export interface DirectiveUsageInterfaceAddedChange extends GraphqlInspector.Core.DirectiveUsageInterfaceAddedChange, ChangeExtensions {}
+export interface DirectiveUsageInterfaceRemovedChange extends GraphqlInspector.Core.DirectiveUsageInterfaceRemovedChange, ChangeExtensions {}
+export interface DirectiveUsageArgumentDefinitionAddedChange extends GraphqlInspector.Core.DirectiveUsageArgumentDefinitionAddedChange, ChangeExtensions {}
+export interface DirectiveUsageArgumentDefinitionRemovedChange extends GraphqlInspector.Core.DirectiveUsageArgumentDefinitionRemovedChange, ChangeExtensions {}
+export interface DirectiveUsageSchemaAddedChange extends GraphqlInspector.Core.DirectiveUsageSchemaAddedChange, ChangeExtensions {}
+export interface DirectiveUsageSchemaRemovedChange extends GraphqlInspector.Core.DirectiveUsageSchemaRemovedChange, ChangeExtensions {}
+export interface DirectiveUsageFieldDefinitionAddedChange extends GraphqlInspector.Core.DirectiveUsageFieldDefinitionAddedChange, ChangeExtensions {}
+export interface DirectiveUsageFieldDefinitionRemovedChange extends GraphqlInspector.Core.DirectiveUsageFieldDefinitionRemovedChange, ChangeExtensions {}
+export interface DirectiveUsageInputFieldDefinitionAddedChange extends GraphqlInspector.Core.DirectiveUsageInputFieldDefinitionAddedChange, ChangeExtensions {}
+export interface DirectiveUsageInputFieldDefinitionRemovedChange extends GraphqlInspector.Core.DirectiveUsageInputFieldDefinitionRemovedChange, ChangeExtensions {}
+
+/**
+ * Discriminated union of all possible change types
+ */
+export type Change =
+  | TypeAddedChange
+  | TypeRemovedChange
+  | TypeKindChangedChange
+  | TypeDescriptionChangedChange
+  | TypeDescriptionAddedChange
+  | TypeDescriptionRemovedChange
+  | FieldAddedChange
+  | FieldRemovedChange
+  | FieldTypeChangedChange
+  // | FieldDeprecatedChange
+  | FieldDeprecationAddedChange
+  | FieldDeprecationRemovedChange
+  | FieldDeprecationReasonChangedChange
+  | FieldDeprecationReasonAddedChange
+  | FieldDeprecationReasonRemovedChange
+  | FieldDescriptionChangedChange
+  | FieldDescriptionAddedChange
+  | FieldDescriptionRemovedChange
+  | FieldArgumentAddedChange
+  | FieldArgumentRemovedChange
+  | FieldArgumentTypeChangedChange
+  | FieldArgumentDescriptionChangedChange
+  | FieldArgumentDefaultChangedChange
+  | EnumValueAddedChange
+  | EnumValueRemovedChange
+  | EnumValueDescriptionChangedChange
+  | EnumValueDeprecationReasonAddedChange
+  | EnumValueDeprecationReasonChangedChange
+  | EnumValueDeprecationReasonRemovedChange
+  | InputFieldAddedChange
+  | InputFieldRemovedChange
+  | InputFieldTypeChangedChange
+  | InputFieldDescriptionAddedChange
+  | InputFieldDescriptionRemovedChange
+  | InputFieldDescriptionChangedChange
+  | InputFieldDefaultValueChangedChange
+  | UnionMemberAddedChange
+  | UnionMemberRemovedChange
+  | ObjectTypeInterfaceAddedChange
+  | ObjectTypeInterfaceRemovedChange
+  | DirectiveAddedChange
+  | DirectiveRemovedChange
+  | DirectiveDescriptionChangedChange
+  | DirectiveLocationAddedChange
+  | DirectiveLocationRemovedChange
+  | DirectiveArgumentAddedChange
+  | DirectiveArgumentRemovedChange
+  | DirectiveArgumentDescriptionChangedChange
+  | DirectiveArgumentDefaultValueChangedChange
+  | DirectiveArgumentTypeChangedChange
+  | SchemaQueryTypeChangedChange
+  | SchemaMutationTypeChangedChange
+  | SchemaSubscriptionTypeChangedChange
+  | DirectiveUsageUnionMemberAddedChange
+  | DirectiveUsageUnionMemberRemovedChange
+  | DirectiveUsageEnumAddedChange
+  | DirectiveUsageEnumRemovedChange
+  | DirectiveUsageEnumValueAddedChange
+  | DirectiveUsageEnumValueRemovedChange
+  | DirectiveUsageInputObjectAddedChange
+  | DirectiveUsageInputObjectRemovedChange
+  | DirectiveUsageFieldAddedChange
+  | DirectiveUsageFieldRemovedChange
+  | DirectiveUsageScalarAddedChange
+  | DirectiveUsageScalarRemovedChange
+  | DirectiveUsageObjectAddedChange
+  | DirectiveUsageObjectRemovedChange
+  | DirectiveUsageInterfaceAddedChange
+  | DirectiveUsageInterfaceRemovedChange
+  | DirectiveUsageArgumentDefinitionAddedChange
+  | DirectiveUsageArgumentDefinitionRemovedChange
+  | DirectiveUsageSchemaAddedChange
+  | DirectiveUsageSchemaRemovedChange
+  | DirectiveUsageFieldDefinitionAddedChange
+  | DirectiveUsageFieldDefinitionRemovedChange
+  | DirectiveUsageInputFieldDefinitionAddedChange
+  | DirectiveUsageInputFieldDefinitionRemovedChange
+
+/**
+ * Type guard to check if a value is a valid Change
+ */
+export const isChange = (value: unknown): value is Change => {
+  return (
+    typeof value === 'object' &&
+    value !== null &&
+    'type' in value &&
+    'criticality' in value &&
+    'message' in value
+  )
+}

package/src/lib/graphql-change/criticality.ts

@@ -0,0 +1,45 @@
+import { CriticalityLevel } from '@graphql-inspector/core'
+import type { BadgeProps } from '@radix-ui/themes'
+import type { Change } from './change-types.js'
+
+export { CriticalityLevel } from '@graphql-inspector/core'
+
+// Type guard functions
+export const isCriticalityBreaking = (change: Change): boolean => change.criticality.level === CriticalityLevel.Breaking
+
+export const isCriticalityDangerous = (change: Change): boolean =>
+  change.criticality.level === CriticalityLevel.Dangerous
+
+export const isCriticalitySafe = (change: Change): boolean => change.criticality.level === CriticalityLevel.NonBreaking
+
+/** Ordered array for iteration (from most to least critical) */
+export const CRITICALITY_LEVELS = [
+  CriticalityLevel.Breaking,
+  CriticalityLevel.Dangerous,
+  CriticalityLevel.NonBreaking,
+] as const
+
+// Config for UI display
+interface CriticalityConfig {
+  color: Exclude<BadgeProps['color'], undefined>
+  label: string
+  shortLabel: string
+}
+
+export const CRITICALITY_CONFIG = {
+  [CriticalityLevel.Breaking]: {
+    color: 'red',
+    label: 'Breaking Changes',
+    shortLabel: 'Breaking',
+  },
+  [CriticalityLevel.Dangerous]: {
+    color: 'yellow',
+    label: 'Dangerous Changes',
+    shortLabel: 'Dangerous',
+  },
+  [CriticalityLevel.NonBreaking]: {
+    color: 'green',
+    label: 'Safe Changes',
+    shortLabel: 'Safe',
+  },
+} satisfies Record<CriticalityLevel, CriticalityConfig>

package/src/lib/graphql-change/graphql-change.ts

@@ -1,11 +1,13 @@
 import { GraphqlInspector } from '#dep/graphql-inspector/index'
 import type { GrafaidOld } from '#lib/grafaid-old/index'
+import type { Change } from './change-types.js'
 
-export type Change = GraphqlInspector.Core.SerializableChange & {
-  message: string
-  path?: string
-  criticality: GraphqlInspector.Core.Criticality
-}
+export * from './change-types.js'
+
+export * from './criticality.js'
+
+import * as Group from './change-groups.js'
+export { Group }
 
 export const calcChangeset = async (parameters: {
   after: GrafaidOld.Schema.Schema

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>
+      )
+  }
+}