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

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

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

@@ -0,0 +1,30 @@
+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 InputFieldDescription: React.FC<{ change: GraphqlChange.Group.InputFieldDescription }> = ({ change }) => {
+  switch (change.type) {
+    case `INPUT_FIELD_DESCRIPTION_ADDED`:
+      return (
+        <ChangeBase change={change}>
+          Added description to input field <Code>{change.meta.inputFieldName}</Code> on{' '}
+          <Code>{change.meta.inputName}</Code>
+        </ChangeBase>
+      )
+    case `INPUT_FIELD_DESCRIPTION_REMOVED`:
+      return (
+        <ChangeBase change={change}>
+          Removed description from input field <Code>{change.meta.inputFieldName}</Code> on{' '}
+          <Code>{change.meta.inputName}</Code>
+        </ChangeBase>
+      )
+    case `INPUT_FIELD_DESCRIPTION_CHANGED`:
+      return (
+        <ChangeBase change={change}>
+          Changed description for input field <Code>{change.meta.inputFieldName}</Code> on{' '}
+          <Code>{change.meta.inputName}</Code>
+        </ChangeBase>
+      )
+  }
+}

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

@@ -0,0 +1,29 @@
+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 InputFieldOperation: React.FC<{ change: GraphqlChange.Group.InputFieldOperation }> = ({ change }) => {
+  switch (change.type) {
+    case `INPUT_FIELD_ADDED`:
+      return (
+        <ChangeBase change={change}>
+          Added input field <Code>{change.meta.addedInputFieldName}</Code> to <Code>{change.meta.inputName}</Code>
+        </ChangeBase>
+      )
+    case `INPUT_FIELD_REMOVED`:
+      return (
+        <ChangeBase change={change}>
+          Removed input field <Code>{change.meta.removedFieldName}</Code> from <Code>{change.meta.inputName}</Code>
+        </ChangeBase>
+      )
+    case `INPUT_FIELD_TYPE_CHANGED`:
+      return (
+        <ChangeBase change={change}>
+          Changed field <Code>{change.meta.inputFieldName}</Code> type from <Code>{change.meta.oldInputFieldType}</Code>
+          {' '}
+          to <Code>{change.meta.newInputFieldType}</Code> on input <Code>{change.meta.inputName}</Code>
+        </ChangeBase>
+      )
+  }
+}

package/src/template/components/Changelog/groups/ObjectTypeInterfaceOperation.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 ObjectTypeInterfaceOperation: React.FC<{ change: GraphqlChange.Group.ObjectTypeInterfaceOperation }> = (
+  { change },
+) => {
+  switch (change.type) {
+    case `OBJECT_TYPE_INTERFACE_ADDED`:
+      return (
+        <ChangeBase change={change}>
+          <Code>{change.meta.objectTypeName}</Code> object implements <Code>{change.meta.addedInterfaceName}</Code>{' '}
+          interface
+        </ChangeBase>
+      )
+    case `OBJECT_TYPE_INTERFACE_REMOVED`:
+      return (
+        <ChangeBase change={change}>
+          <Code>{change.meta.objectTypeName}</Code> object no longer implements{' '}
+          <Code>{change.meta.removedInterfaceName}</Code> interface
+        </ChangeBase>
+      )
+  }
+}

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

@@ -0,0 +1,31 @@
+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 SchemaRootType: React.FC<{ change: GraphqlChange.Group.SchemaRootType }> = ({ change }) => {
+  switch (change.type) {
+    case `SCHEMA_QUERY_TYPE_CHANGED`:
+      return (
+        <ChangeBase change={change}>
+          Schema query root type changed from <Code>{change.meta.oldQueryTypeName}</Code> to{' '}
+          <Code>{change.meta.newQueryTypeName}</Code>
+        </ChangeBase>
+      )
+    case `SCHEMA_MUTATION_TYPE_CHANGED`:
+      return (
+        <ChangeBase change={change}>
+          Schema mutation root type changed from <Code>{change.meta.oldMutationTypeName || `null`}</Code> to{' '}
+          <Code>{change.meta.newMutationTypeName || `null`}</Code>
+        </ChangeBase>
+      )
+    case `SCHEMA_SUBSCRIPTION_TYPE_CHANGED`:
+      return (
+        <ChangeBase change={change}>
+          Schema subscription root type changed from <Code>{change.meta.oldSubscriptionTypeName || `null`}</Code> to
+          {' '}
+          <Code>{change.meta.newSubscriptionTypeName || `null`}</Code>
+        </ChangeBase>
+      )
+  }
+}

package/src/template/components/Changelog/groups/TypeDescription.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 TypeDescription: React.FC<{ change: GraphqlChange.Group.TypeDescription }> = ({ change }) => {
+  switch (change.type) {
+    case `TYPE_DESCRIPTION_ADDED`:
+      return (
+        <ChangeBase change={change}>
+          Added description to type <Code>{change.meta.typeName}</Code>
+        </ChangeBase>
+      )
+    case `TYPE_DESCRIPTION_REMOVED`:
+      return (
+        <ChangeBase change={change}>
+          Removed description from type <Code>{change.meta.typeName}</Code>
+        </ChangeBase>
+      )
+    case `TYPE_DESCRIPTION_CHANGED`:
+      return (
+        <ChangeBase change={change}>
+          Changed description for type <Code>{change.meta.typeName}</Code>
+        </ChangeBase>
+      )
+  }
+}

package/src/template/components/Changelog/groups/TypeOperation.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 TypeOperation: React.FC<{ change: GraphqlChange.Group.TypeOperation }> = ({ change }) => {
+  switch (change.type) {
+    case `TYPE_ADDED`:
+      return (
+        <ChangeBase change={change}>
+          Added type <Code>{change.meta.addedTypeName}</Code>
+        </ChangeBase>
+      )
+    case `TYPE_REMOVED`:
+      return (
+        <ChangeBase change={change}>
+          Removed type <Code>{change.meta.removedTypeName}</Code>
+        </ChangeBase>
+      )
+    case `TYPE_KIND_CHANGED`:
+      return (
+        <ChangeBase change={change}>
+          Changed type <Code>{change.meta.typeName}</Code> from {change.meta.oldTypeKind} to {change.meta.newTypeKind}
+        </ChangeBase>
+      )
+  }
+}

package/src/template/components/Changelog/groups/UnionMemberOperation.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 UnionMemberOperation: React.FC<{ change: GraphqlChange.Group.UnionMemberOperation }> = ({ change }) => {
+  switch (change.type) {
+    case `UNION_MEMBER_ADDED`:
+      return (
+        <ChangeBase change={change}>
+          Added <Code>{change.meta.addedUnionMemberTypeName}</Code> to union <Code>{change.meta.unionName}</Code>
+        </ChangeBase>
+      )
+    case `UNION_MEMBER_REMOVED`:
+      return (
+        <ChangeBase change={change}>
+          Removed <Code>{change.meta.removedUnionMemberTypeName}</Code> from union <Code>{change.meta.unionName}</Code>
+        </ChangeBase>
+      )
+  }
+}

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

@@ -0,0 +1,25 @@
+export { DirectiveArgument } from './DirectiveArgument.js'
+export { DirectiveArgumentDescription } from './DirectiveArgumentDescription.js'
+export { DirectiveArgumentOperation } from './DirectiveArgumentOperation.js'
+export { DirectiveDescription } from './DirectiveDescription.js'
+export { DirectiveLocationOperation } from './DirectiveLocationOperation.js'
+export { DirectiveOperation } from './DirectiveOperation.js'
+export { DirectiveUsage } from './DirectiveUsage.js'
+export { EnumValueDeprecationReason } from './EnumValueDeprecationReason.js'
+export { EnumValueDescription } from './EnumValueDescription.js'
+export { EnumValueOperation } from './EnumValueOperation.js'
+export { FieldArgument } from './FieldArgument.js'
+export { FieldArgumentDescription } from './FieldArgumentDescription.js'
+export { FieldArgumentOperation } from './FieldArgumentOperation.js'
+export { FieldDeprecation } from './FieldDeprecation.js'
+export { FieldDeprecationReason } from './FieldDeprecationReason.js'
+export { FieldDescription } from './FieldDescription.js'
+export { FieldOperation } from './FieldOperation.js'
+export { InputFieldDefaultValue } from './InputFieldDefaultValue.js'
+export { InputFieldDescription } from './InputFieldDescription.js'
+export { InputFieldOperation } from './InputFieldOperation.js'
+export { ObjectTypeInterfaceOperation } from './ObjectTypeInterfaceOperation.js'
+export { SchemaRootType } from './SchemaRootType.js'
+export { TypeDescription } from './TypeDescription.js'
+export { TypeOperation } from './TypeOperation.js'
+export { UnionMemberOperation } from './UnionMemberOperation.js'

package/src/template/components/Changelog.tsx

@@ -1,11 +1,15 @@
 import type { GrafaidOld } from '#lib/grafaid-old/index'
-import { Grafaid } from '#lib/grafaid/index'
-import type { GraphqlChange } from '#lib/graphql-change/index'
+import { CRITICALITY_LEVELS } from '#lib/graphql-change/criticality'
+import { GraphqlChange } from '#lib/graphql-change/index'
 import type { GraphqlChangeset } from '#lib/graphql-changeset/index'
-import { Box, Code } from '@radix-ui/themes'
+import type { CriticalityLevel } from '@graphql-inspector/core'
+import { Box } from '@radix-ui/themes'
+import { neverCase } from '@wollybeard/kit/language'
 import type React from 'react'
+import { useMemo } from 'react'
 import type { Schema as ChangelogData } from '../../api/schema/index.js'
-import { Graphql } from './graphql/index.js'
+import { CriticalitySection } from './Changelog/CriticalitySection.js'
+import * as Group from './Changelog/groups/index.js'
 
 export const renderDate = (date: Date) => {
   return date.toLocaleString(`default`, {
@@ -19,20 +23,50 @@ export const renderDate = (date: Date) => {
 export const Changelog: React.FC<{ schema: ChangelogData.Schema }> = ({ schema }) => {
   return (
     <Box>
-      {schema.versions.map(changeset => <Changeset key={changeset.date.getDate()} changeset={changeset} />)}
+      {schema.versions.map(changeset => <Changeset key={changeset.date.toISOString()} changeset={changeset} />)}
     </Box>
   )
 }
 
 const Changeset: React.FC<{ changeset: GraphqlChangeset.ChangeSet }> = ({ changeset }) => {
+  // Group changes by criticality level
+  const groupedChanges = useMemo(() => {
+    const groups = {} as Record<CriticalityLevel, GraphqlChange.Change[]>
+
+    // Initialize empty arrays for each level
+    CRITICALITY_LEVELS.forEach(level => {
+      groups[level] = []
+    })
+
+    // Group changes
+    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
+      .filter(level => groups[level].length > 0)
+      .map(level => ({
+        level,
+        changes: groups[level],
+      }))
+  }, [changeset.changes])
+
   return (
-    <Box>
-      <h1 title={changeset.date.toISOString()}>
+    <Box mb='6'>
+      <h1 title={changeset.date.toISOString()} id={changeset.date.toISOString()}>
         {renderDate(changeset.date)}
       </h1>
-      <ul>
-        {changeset.changes.map(change => <Change key={change.message} change={change} schema={changeset.after} />)}
-      </ul>
+      {groupedChanges.map(group => (
+        <CriticalitySection key={group.level} level={group.level} changes={group.changes}>
+          {group.changes.map(change => (
+            <Change key={`${change.type}-${change.path || change.message}`} change={change} schema={changeset.after} />
+          ))}
+        </CriticalitySection>
+      ))}
     </Box>
   )
 }
@@ -40,58 +74,57 @@ const Changeset: React.FC<{ changeset: GraphqlChangeset.ChangeSet }> = ({ change
 const Change: React.FC<{ change: GraphqlChange.Change; schema: GrafaidOld.Schema.Schema }> = (
   { change, schema },
 ) => {
-  const getTypeOrThrow = (name: string) => {
-    const type = schema.getType(name)
-    if (!type) throw new Error(`Type ${name} not found`)
-    return type
-  }
-
-  switch (change.type) {
-    case `TYPE_ADDED`: {
-      const type = getTypeOrThrow(change.meta.addedTypeName)
-      return (
-        <li>
-          Added type <Graphql.TypeLink type={type} />
-        </li>
-      )
-    }
-    case `FIELD_ADDED`: {
-      const rootTypeMap = Grafaid.Schema.getRootTypeMap(schema)
-      const rootDetails = rootTypeMap.list.find(_ => _.name.canonical === change.meta.typeName)
-      const type = getTypeOrThrow(change.meta.typeName)
-      if (rootDetails) {
-        return (
-          <li>
-            Added {rootDetails.operationType}
-            {` `}
-            <Code
-              color='jade'
-              variant='ghost'
-              style={{ borderBottom: `1px dotted var(--jade-6)`, borderRadius: `0` }}
-            >
-              {change.meta.addedFieldName}
-            </Code>
-          </li>
-        )
-      }
-
-      return (
-        <li>
-          Added field{` `}
-          <Code
-            color='gray'
-            variant='ghost'
-            style={{ borderBottom: `1px dotted var(--gray-6)`, borderRadius: `0` }}
-          >
-            {change.meta.addedFieldName}
-          </Code>
-          {` `}
-          to type{` `}
-          <Graphql.TypeLink type={type} />.
-        </li>
-      )
-    }
-    default:
-      return <li>TODO: {change.type}</li>
+  if (GraphqlChange.Group.isTypeOperation(change)) {
+    return <Group.TypeOperation change={change} />
+  } else if (GraphqlChange.Group.isTypeDescription(change)) {
+    return <Group.TypeDescription change={change} />
+  } else if (GraphqlChange.Group.isFieldOperation(change)) {
+    return <Group.FieldOperation change={change} />
+  } else if (GraphqlChange.Group.isFieldDescription(change)) {
+    return <Group.FieldDescription change={change} />
+  } else if (GraphqlChange.Group.isFieldDeprecation(change)) {
+    return <Group.FieldDeprecation change={change} />
+  } else if (GraphqlChange.Group.isFieldDeprecationReason(change)) {
+    return <Group.FieldDeprecationReason change={change} />
+  } else if (GraphqlChange.Group.isFieldArgumentOperation(change)) {
+    return <Group.FieldArgumentOperation change={change} />
+  } else if (GraphqlChange.Group.isFieldArgument(change)) {
+    return <Group.FieldArgument change={change} />
+  } else if (GraphqlChange.Group.isFieldArgumentDescription(change)) {
+    return <Group.FieldArgumentDescription change={change} />
+  } else if (GraphqlChange.Group.isEnumValueOperation(change)) {
+    return <Group.EnumValueOperation change={change} />
+  } else if (GraphqlChange.Group.isEnumValueDescription(change)) {
+    return <Group.EnumValueDescription change={change} />
+  } else if (GraphqlChange.Group.isEnumValueDeprecationReason(change)) {
+    return <Group.EnumValueDeprecationReason change={change} />
+  } else if (GraphqlChange.Group.isInputFieldOperation(change)) {
+    return <Group.InputFieldOperation change={change} />
+  } else if (GraphqlChange.Group.isInputFieldDescription(change)) {
+    return <Group.InputFieldDescription change={change} />
+  } else if (GraphqlChange.Group.isInputFieldDefaultValue(change)) {
+    return <Group.InputFieldDefaultValue change={change} />
+  } else if (GraphqlChange.Group.isUnionMemberOperation(change)) {
+    return <Group.UnionMemberOperation change={change} />
+  } else if (GraphqlChange.Group.isObjectTypeInterfaceOperation(change)) {
+    return <Group.ObjectTypeInterfaceOperation change={change} />
+  } else if (GraphqlChange.Group.isDirectiveOperation(change)) {
+    return <Group.DirectiveOperation change={change} />
+  } else if (GraphqlChange.Group.isDirectiveDescription(change)) {
+    return <Group.DirectiveDescription change={change} />
+  } else if (GraphqlChange.Group.isDirectiveLocationOperation(change)) {
+    return <Group.DirectiveLocationOperation change={change} />
+  } else if (GraphqlChange.Group.isDirectiveArgumentOperation(change)) {
+    return <Group.DirectiveArgumentOperation change={change} />
+  } else if (GraphqlChange.Group.isDirectiveArgument(change)) {
+    return <Group.DirectiveArgument change={change} />
+  } else if (GraphqlChange.Group.isDirectiveArgumentDescription(change)) {
+    return <Group.DirectiveArgumentDescription change={change} />
+  } else if (GraphqlChange.Group.isSchemaRootType(change)) {
+    return <Group.SchemaRootType change={change} />
+  } else if (GraphqlChange.Group.isDirectiveUsage(change)) {
+    return <Group.DirectiveUsage change={change} />
+  } else {
+    neverCase(change)
   }
 }