@graphcommerce/hygraph-dynamic-rows-ui 8.1.0-canary.9 → 9.0.0-canary.101

package/CHANGELOG.md

@@ -1,5 +1,205 @@
 # @graphcommerce/hygraph-dynamic-rows-ui
 
+## 9.0.0-canary.101
+
+## 9.0.0-canary.100
+
+## 9.0.0-canary.99
+
+## 9.0.0-canary.98
+
+## 9.0.0-canary.97
+
+### Patch Changes
+
+- [#2410](https://github.com/graphcommerce-org/graphcommerce/pull/2410) [`2a425b3`](https://github.com/graphcommerce-org/graphcommerce/commit/2a425b323ddaf0918c549e93b598888db7328d66) - Allow attributes with deprecationReasons (e.g. custom attributes) as PropertyPicker value ([@carlocarels90](https://github.com/carlocarels90))
+
+## 9.0.0-canary.96
+
+## 9.0.0-canary.95
+
+## 9.0.0-canary.94
+
+## 9.0.0-canary.93
+
+## 9.0.0-canary.92
+
+## 9.0.0-canary.91
+
+## 9.0.0-canary.90
+
+## 9.0.0-canary.89
+
+## 9.0.0-canary.88
+
+## 9.0.0-canary.87
+
+## 9.0.0-canary.86
+
+## 9.0.0-canary.85
+
+## 9.0.0-canary.84
+
+## 9.0.0-canary.83
+
+## 9.0.0-canary.82
+
+## 9.0.0-canary.81
+
+## 9.0.0-canary.80
+
+## 9.0.0-canary.79
+
+## 9.0.0-canary.78
+
+## 9.0.0-canary.77
+
+## 9.0.0-canary.76
+
+## 9.0.0-canary.75
+
+## 9.0.0-canary.74
+
+## 9.0.0-canary.73
+
+## 9.0.0-canary.72
+
+## 9.0.0-canary.71
+
+## 9.0.0-canary.70
+
+### Patch Changes
+
+- [#2347](https://github.com/graphcommerce-org/graphcommerce/pull/2347) [`7fa50a2`](https://github.com/graphcommerce-org/graphcommerce/commit/7fa50a2f21ee9edbc67d06d7694316f101f9415f) - Resolve issue where the dynamic rows UI wouldn’t load any definitions ([@paales](https://github.com/paales))
+
+## 9.0.0-canary.69
+
+## 9.0.0-canary.68
+
+## 9.0.0-canary.67
+
+## 9.0.0-canary.66
+
+## 9.0.0-canary.65
+
+## 9.0.0-canary.64
+
+## 9.0.0-canary.63
+
+## 9.0.0-canary.62
+
+## 9.0.0-canary.61
+
+## 9.0.0-canary.60
+
+## 9.0.0-canary.59
+
+## 9.0.0-canary.58
+
+## 9.0.0-canary.57
+
+## 9.0.0-canary.56
+
+## 9.0.0-canary.55
+
+## 9.0.0-canary.54
+
+## 8.1.0-canary.53
+
+## 8.1.0-canary.52
+
+## 8.1.0-canary.51
+
+## 8.1.0-canary.50
+
+## 8.1.0-canary.49
+
+## 8.1.0-canary.48
+
+## 8.1.0-canary.47
+
+## 8.1.0-canary.46
+
+### Patch Changes
+
+- [#2316](https://github.com/graphcommerce-org/graphcommerce/pull/2316) [`28d4708`](https://github.com/graphcommerce-org/graphcommerce/commit/28d470861a10a38690d565d236ce573905038d2b) - fix hygraph studio bugs in Dynamic Row UI module. Style config screen DR UI app. ([@JoshuaS98](https://github.com/JoshuaS98))
+
+## 8.1.0-canary.45
+
+## 8.1.0-canary.44
+
+## 8.1.0-canary.43
+
+## 8.1.0-canary.42
+
+### Patch Changes
+
+- [#2308](https://github.com/graphcommerce-org/graphcommerce/pull/2308) [`8faa5ac`](https://github.com/graphcommerce-org/graphcommerce/commit/8faa5ac618ecfdacd6d5eb751b4110c423aef97f) - Added Draft Mode support. When enabled it will be shown. ([@paales](https://github.com/paales))
+
+## 8.1.0-canary.41
+
+## 8.1.0-canary.40
+
+## 8.1.0-canary.39
+
+## 8.1.0-canary.38
+
+## 8.1.0-canary.37
+
+## 8.1.0-canary.36
+
+## 8.1.0-canary.35
+
+## 8.1.0-canary.34
+
+## 8.1.0-canary.33
+
+## 8.1.0-canary.32
+
+## 8.1.0-canary.31
+
+## 8.1.0-canary.30
+
+## 8.1.0-canary.29
+
+## 8.1.0-canary.28
+
+## 8.1.0-canary.27
+
+## 8.1.0-canary.26
+
+## 8.1.0-canary.25
+
+## 8.1.0-canary.24
+
+## 8.1.0-canary.23
+
+## 8.1.0-canary.22
+
+## 8.1.0-canary.21
+
+## 8.1.0-canary.20
+
+## 8.1.0-canary.19
+
+## 8.1.0-canary.18
+
+## 8.1.0-canary.17
+
+## 8.1.0-canary.16
+
+## 8.1.0-canary.15
+
+## 8.1.0-canary.14
+
+## 8.1.0-canary.13
+
+## 8.1.0-canary.12
+
+## 8.1.0-canary.11
+
+## 8.1.0-canary.10
+
 ## 8.1.0-canary.9
 
 ## 8.1.0-canary.8
@@ -92,8 +292,7 @@
 
 ### Minor Changes
 
-- [#2100](https://github.com/graphcommerce-org/graphcommerce/pull/2100) [`4df891a`](https://github.com/graphcommerce-org/graphcommerce/commit/4df891a4c18b29cc52447eab3a97c66948b6c18f) - Add Dynamic Row UI for property UI field through a custom Hygraph application
-  ([@JoshuaS98](https://github.com/JoshuaS98))
+- [#2100](https://github.com/graphcommerce-org/graphcommerce/pull/2100) [`4df891a`](https://github.com/graphcommerce-org/graphcommerce/commit/4df891a4c18b29cc52447eab3a97c66948b6c18f) - Add Dynamic Row UI for property UI field through a custom Hygraph application ([@JoshuaS98](https://github.com/JoshuaS98))
 
 ## 8.0.0-canary.100
 

package/components/PropertyPicker.tsx

@@ -1,91 +1,59 @@
-import { ApolloClient, InMemoryCache } from '@apollo/client'
-import { useFieldExtension } from '@hygraph/app-sdk-react'
-// eslint-disable-next-line @typescript-eslint/no-restricted-imports
+import { ApolloClient, gql, InMemoryCache, useQuery } from '@apollo/client'
+import { FieldExtensionProps, useFieldExtension } from '@hygraph/app-sdk-react'
 import { TextField } from '@mui/material'
+import { getIntrospectionQuery, IntrospectionQuery } from 'graphql'
 import { useEffect, useMemo, useState } from 'react'
-import { createOptionsFromInterfaceObject, objectifyGraphQLInterface } from '../lib'
-import { fetchGraphQLInterface } from '../lib/fetchGraphQLInterface'
-import { __Field } from '../types'
+import { getFieldPaths } from '../lib/getFieldPaths'
+
+function useClient(extension: FieldExtensionProps['extension']) {
+  return useMemo(
+    () =>
+      new ApolloClient({
+        uri:
+          typeof extension.config.backend === 'string'
+            ? extension.config.backend
+            : 'https://graphcommerce.vercel.app/api/graphql', // fallback on the standard GraphCommerce Schema
+        cache: new InMemoryCache(),
+      }),
+    [extension.config.backend],
+  )
+}
 
 export function PropertyPicker() {
-  const { value, onChange, field, extension } = useFieldExtension()
+  const fieldExtension = useFieldExtension()
+
+  const { value, onChange, extension } = fieldExtension
   const [localValue, setLocalValue] = useState<string | undefined | null>(
     typeof value === 'string' ? value : undefined,
   )
-  const [fields, setFields] = useState<__Field[] | null>(null)
+
+  const client = useClient(extension)
+  const { data, loading, error } = useQuery<IntrospectionQuery>(gql(getIntrospectionQuery()), {
+    client,
+  })
+  // eslint-disable-next-line no-underscore-dangle
+  const schema = data?.__schema
 
   useEffect(() => {
     onChange(localValue).catch((err) => err)
   }, [localValue, onChange])
 
-  const graphQLInterfaceQuery = useMemo(() => {
-    const client = new ApolloClient({
-      uri:
-        typeof extension.config.backend === 'string'
-          ? extension.config.backend
-          : 'https://graphcommerce.vercel.app/api/graphql', // fallback on the standard GraphCommerce Schema
-      cache: new InMemoryCache(),
-    })
-    return fetchGraphQLInterface(client)
-  }, [extension.config.backend])
-
-  // Prepare options 
-  const numberOptions = useMemo(
-    () =>
-      createOptionsFromInterfaceObject(
-        objectifyGraphQLInterface(fields, 'number', ['ProductInterface']),
-      ),
-    [fields],
-  )
-  const textOptions = useMemo(
-    () =>
-      createOptionsFromInterfaceObject(
-        objectifyGraphQLInterface(fields, 'text', ['ProductInterface']),
-      ),
-    [fields],
-  )
-  const allOptions = useMemo(
-    () => ({
-      text: [...textOptions, { label: 'url', id: 'url' }].sort((a, b) => {
-        if (!a.label.includes('.') && !b.label.includes('.')) {
-          return a.label.localeCompare(b.label)
-        }
-        if (a.label.includes('.')) {
-          return 1
-        }
-        return -1
-      }),
-      number: [...numberOptions, { label: 'url', id: 'url' }],
-    }),
-    [numberOptions, textOptions],
-  )
-
-  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-  // @ts-ignore - outdated types from @hygraph/app-sdk-react
-  const fieldType = field.parent.apiId ?? 'ConditionText'
-  const options = fieldType === 'ConditionNumber' ? allOptions.number : allOptions.text
-
-  if (!fields) {
-    Promise.resolve(graphQLInterfaceQuery)
-      .then((res) => {
-        const newFields: __Field[] = res?.data.__type?.fields
-
-        setFields(newFields)
-      })
-      .catch((err) => err)
-
-    return <div>Loading fields...</div>
-  }
-  if (options.length < 1) return <div>No properties available</div>
-  if (options.length > 10000) return <div>Too many properties to display</div>
+  const fieldPaths = useMemo(() => {
+    if (!schema) return []
+    return getFieldPaths(schema, ['ProductInterface'])
+      .sort((a, b) => a.depth() - b.depth())
+      .map((fp) => fp.stringify())
+      .filter<string>((v) => v !== undefined)
+  }, [schema])
 
   return (
     <TextField
       id='property-selector'
-      select
+      select={!!fieldPaths.length}
+      variant='outlined'
+      size='small'
       SelectProps={{
         native: true,
-        variant: 'outlined',
       }}
       value={localValue}
       onChange={(v) => {
@@ -95,6 +63,7 @@ export function PropertyPicker() {
       fullWidth
       sx={{
         mt: '4px',
+        fontSize: '0.8em',
         '& .MuiInputBase-root': {
           borderRadius: { xs: '2px!important' },
         },
@@ -119,11 +88,18 @@ export function PropertyPicker() {
         },
       }}
     >
-      {options.map((o) => (
-        <option key={o.id} value={o.id}>
-          {o.label}
-        </option>
-      ))}
+      {fieldPaths.length > 0 ? (
+        <>
+          <option value='url'>url</option>
+          {fieldPaths.map((fp) => (
+            <option key={fp} value={fp}>
+              {fp}
+            </option>
+          ))}
+        </>
+      ) : (
+        <>{loading ? 'Loading..' : error?.message}</>
+      )}
     </TextField>
   )
 }

package/components/Setup.tsx

@@ -1,15 +1,14 @@
 import { useApp, Wrapper } from '@hygraph/app-sdk-react'
+import Image from 'next/image'
 import { useState } from 'react'
 import styles from './setup.module.css'
 
 function Install() {
-  // @ts-expect-error - outdated types from @hygraph/app-sdk-react
-  const { updateInstallation, installation, showToast, extension } = useApp()
+  const { updateInstallation, installation, showToast } = useApp()
+
   const installed = installation.status === 'COMPLETED'
   const [gqlUri, setGqlUri] = useState('')
 
-  const changedUri = extension.config.backend !== gqlUri
-
   const saveOnClick = () =>
     updateInstallation({
       config: { backend: gqlUri },
@@ -64,10 +63,8 @@ function Install() {
 
   let buttonText: string
   let buttonAction: typeof uninstallOnClick | typeof installOnClick
-  if (changedUri) {
-    buttonText = 'Save'
-    buttonAction = saveOnClick
-  } else if (installed) {
+
+  if (installed) {
     buttonText = 'Disable app'
     buttonAction = uninstallOnClick
   } else {
@@ -78,17 +75,30 @@ function Install() {
   return (
     <>
       <>
-        <span>GraphQL API URI</span>
+        <span>
+          <strong>GraphQL API URI</strong>
+        </span>
         <input
           name='gql-uri'
-          defaultValue={extension.config.backend}
+          className={styles.textInput}
+          defaultValue={(installation.config.backend as string) ?? ''}
           onChange={(e) => setGqlUri(e.target.value)}
         />
       </>
 
-      <button type='button' className={styles.button} onClick={buttonAction}>
-        {buttonText}
-      </button>
+      <div className={styles.buttonsContainer}>
+        <button type='button' className={styles.button} onClick={saveOnClick} data-save-button>
+          Save
+        </button>
+        <button
+          type='button'
+          className={styles.button}
+          onClick={buttonAction}
+          aria-disabled={installed}
+        >
+          {buttonText}
+        </button>
+      </div>
     </>
   )
 }
@@ -96,16 +106,28 @@ function Install() {
 export function Page() {
   return (
     <div className={styles.container}>
-      <h1 className={styles.title}>Dynamic Rows Property Selector</h1>
-      <p className={styles.description}>
-        Enhance your content management experience with Dynamic Rows, specifically designed to
-        integrate seamlessly with our Dynamic Row module. It features an intuitive property picker
-        field, allowing for effortless selection and organization of properties to customize your
-        content layout. Press install to get started!
-      </p>
-      <Wrapper>
-        <Install />
-      </Wrapper>
+      <div className={styles.contentWrapper}>
+        <div className={styles.logoWrapper}>
+          <Image
+            src='https://www.graphcommerce.org/_next/static/media/graphcommerce.a8fe7e28.svg'
+            layout='fill'
+            alt='GraphCommerce logo'
+          />
+        </div>
+
+        <h1 className={styles.title}>
+          Dynamic Rows Property Selector <span className={styles.author}>by Joshua Bolk</span>
+        </h1>
+        <p className={styles.description}>
+          Enhance your content management experience with Dynamic Rows, specifically designed to
+          integrate seamlessly with our Dynamic Row module. It features an intuitive property picker
+          field, allowing for effortless selection and organization of properties to customize your
+          content layout. Enable the app and put your graphQL URI to get started.
+        </p>
+        <Wrapper>
+          <Install />
+        </Wrapper>
+      </div>
     </div>
   )
 }

package/components/setup.module.css

@@ -1,11 +1,28 @@
 .container {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
   height: 100%;
   max-width: 1200px;
-  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+  font-family: 'Roboto', sans-serif;
+  line-height: 1.3;
+  font-size: 18px;
+  background-color: aliceblue;
+  padding: 32px 24px;
+  border-radius: 8px;
+  margin: 0 auto;
+}
+
+.contentWrapper {
+  max-width: 700px;
+  display: flex;
+  flex-direction: column;
+  align-items: left;
+  margin: 0 auto;
+}
+
+.logoWrapper {
+  position: relative;
+  height: 60px;
+  width: 50%;
+  margin-bottom: 32px;
 }
 
 .title {
@@ -15,6 +32,12 @@
   margin-bottom: 16px;
 }
 
+.author {
+  font-size: 12px;
+  font-weight: 300;
+  line-height: 16px;
+}
+
 .desciption {
   font-size: 14px;
   font-weight: 300;
@@ -40,19 +63,51 @@
   text-decoration: none;
   font-weight: 500;
   border: 0px;
-  margin: 16px 0px 0px;
+  margin: 16px 0 0 0;
   border-radius: 4px;
-  font-size: 12px;
+  font-size: 18px;
   line-height: 16px;
-  height: 24px;
+  height: 40px;
   min-width: 24px;
-  padding-left: 8px;
-  padding-right: 8px;
+  padding-left: 16px;
+  padding-right: 16px;
   color: rgb(255, 255, 255);
-  background-color: rgb(90, 92, 236);
+  background-color: #2563eb;
+  transition: background-color 0.2s ease 0s;
 }
 
 .button:hover {
   cursor: pointer;
-  background-color: rgb(58, 48, 166);
+  background-color: #1d4ed8;
+}
+
+.button[aria-disabled='true'] {
+  background-color: rgb(200, 200, 200);
+}
+
+.button[aria-disabled='true']:hover {
+  background-color: rgb(192, 192, 192);
+}
+
+.button[aria-disabled='false'] {
+  background-color: #16a34a;
+}
+
+.button[aria-disabled='false']:hover {
+  background-color: #15803d;
+}
+
+.buttonsContainer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-top: 8px;
+  column-gap: 24px;
+}
+
+.textInput {
+  display: inline;
+  margin: 24px 0;
+  font-size: 18px;
+  padding: 12px 6px;
 }

package/lib/getFieldPaths.ts

@@ -0,0 +1,66 @@
+import { IntrospectionField, IntrospectionOutputTypeRef, IntrospectionSchema } from 'graphql'
+
+function getType(type: IntrospectionOutputTypeRef) {
+  switch (type.kind) {
+    case 'NON_NULL':
+    case 'LIST':
+      return getType(type.ofType)
+    default:
+      return type
+  }
+}
+
+class FieldPath {
+  constructor(
+    public field: IntrospectionField,
+    private prev: FieldPath | undefined,
+  ) {}
+
+  stringify(filter?: string[]): string | undefined {
+    if (this.field.type.kind === 'SCALAR' && filter && !filter.includes(this.field.type.name)) {
+      return undefined
+    }
+
+    const prevStr = this.prev?.stringify(filter)
+    return prevStr ? `${prevStr}.${this.field.name}` : this.field.name
+  }
+
+  depth = () => (this?.prev?.depth() ?? 0) + 1
+}
+
+export function getFieldPaths(
+  schema: IntrospectionSchema,
+  types: string[],
+  prevPath: FieldPath | undefined = undefined,
+): FieldPath[] {
+  const typeName = types[types.length - 1]
+
+  const paths: FieldPath[] = []
+  const type = schema.types.find((t) => t.name === typeName)
+
+  if (!type) return paths
+
+  if ((prevPath?.depth() ?? 0) > 3) return paths
+
+  if (type.kind === 'OBJECT' || type.kind === 'INTERFACE') {
+    type.fields.forEach((field) => {
+      const t = getType(field.type)
+
+      if (!types.includes(t.name)) {
+        const newTypes = [...types, t.name]
+
+        const newPath = new FieldPath(field, prevPath)
+
+        if (t.kind === 'OBJECT' || t.kind === 'INTERFACE') {
+          paths.push(...getFieldPaths(schema, newTypes, newPath))
+        } else if (t.kind === 'SCALAR' || t.kind === 'ENUM') {
+          paths.push(newPath)
+        } else if (t.kind === 'UNION') {
+          // not supported currently
+        }
+      }
+    })
+  }
+
+  return paths
+}

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/hygraph-dynamic-rows-ui",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "8.1.0-canary.9",
+  "version": "9.0.0-canary.101",
   "sideEffects": false,
   "type": "commonjs",
   "prettier": "@graphcommerce/prettier-config-pwa",
@@ -16,29 +16,29 @@
     "dev": "next dev"
   },
   "dependencies": {
-    "@apollo/client": "~3.8.10",
-    "@graphcommerce/next-config": "8.1.0-canary.9",
-    "@hygraph/app-sdk-react": "^0.0.3",
-    "@lingui/core": "^4.7.0",
-    "@lingui/macro": "^4.7.0",
-    "@lingui/react": "^4.7.0",
-    "@mui/material": "5.15.5",
+    "@apollo/client": "~3.11.8",
+    "@graphcommerce/next-config": "9.0.0-canary.101",
+    "@hygraph/app-sdk-react": "^0.0.5",
+    "@lingui/core": "4.11.4",
+    "@lingui/macro": "4.11.4",
+    "@lingui/react": "4.11.4",
+    "@mui/material": "5.16.7",
     "cross-env": "^7.0.3",
-    "dotenv": "16.3.1",
-    "graphql": "^16.8.1",
-    "next": "14.1.0",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "webpack": "5.89.0"
+    "dotenv": "16.4.5",
+    "graphql": "^16.9.0",
+    "next": "14.2.14",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "webpack": "~5.93.0"
   },
   "devDependencies": {
-    "@graphcommerce/eslint-config-pwa": "8.1.0-canary.9",
-    "@graphcommerce/prettier-config-pwa": "8.1.0-canary.9",
-    "@graphcommerce/typescript-config-pwa": "8.1.0-canary.9",
-    "@types/react-is": "^18.2.4",
+    "@graphcommerce/eslint-config-pwa": "9.0.0-canary.101",
+    "@graphcommerce/prettier-config-pwa": "9.0.0-canary.101",
+    "@graphcommerce/typescript-config-pwa": "9.0.0-canary.101",
+    "@types/react-is": "^18.3.0",
     "babel-plugin-macros": "^3.1.0",
-    "eslint": "8.56.0",
-    "prettier": "3.2.4",
-    "typescript": "5.3.3"
+    "eslint": "^8",
+    "prettier": "3.3.3",
+    "typescript": "5.6.2"
   }
 }

package/pages/property-picker.tsx

@@ -1,15 +1,14 @@
 import { Wrapper } from '@hygraph/app-sdk-react'
-import React from 'react'
-import { PropertyPicker } from '..'
+import React, { useEffect } from 'react'
+import { PropertyPicker } from '../components/PropertyPicker'
 
 export default function DRPropertyPicker() {
   const fieldContainer = React.useRef<HTMLDivElement | null>(null)
 
-  React.useEffect(() => {
+  useEffect(() => {
     /**
      * Some styling is being undone here to resolve conflicts between Hygraph App SDK and CssAndFramerMotionProvider.
      */
-
     const frameBox1 = fieldContainer?.current?.parentElement
     if (frameBox1) {
       frameBox1.style.position = 'static'

package/pages/setup.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useEffect } from 'react'
 import { Page } from '..'
 
 export default function Setup() {
@@ -8,7 +8,7 @@ export default function Setup() {
    * This is a hack to fix the height of the iframe, which was malfunctioning because of a conflict
    * with FramerNextPages
    */
-  React.useEffect(() => {
+  useEffect(() => {
     const framerParent = appContainer?.current?.parentElement
     if (framerParent) {
       framerParent.style.position = 'static'

package/lib/createOptionsFromInterfaceObject.ts

@@ -1,42 +0,0 @@
-import { ProductProperty } from '../types'
-
-export const createOptionsFromInterfaceObject = (
-  obj: object,
-  path = '',
-  inputs: ProductProperty[] = [],
-  parent = '',
-): ProductProperty[] => {
-  for (const [key, value] of Object.entries(obj)) {
-    /** Keep count of the current path and parent */
-    const currentPath: string = path ? `${path}.${key}` : key
-    const currentParent: string = parent ? `${parent}/` : ''
-
-    /**
-     * If the value is a string, number or boolean, add it to the inputs array. If the value is an
-     * array, recurse on the first item. If the value is an object, recurse on all it's keys.
-     */
-    if (typeof value === 'string' || typeof value === 'number' || typeof value === 'boolean') {
-      inputs.push({
-        label: currentPath,
-        id: currentPath,
-      })
-    } else if (Array.isArray(value) && value.length > 0) {
-      createOptionsFromInterfaceObject(
-        value[0] as object,
-        `${currentPath}[0]`,
-        inputs,
-        `${currentParent}${key}`,
-      )
-    } else if (typeof value === 'object' && value !== null) {
-      // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
-      createOptionsFromInterfaceObject(
-        value as object,
-        currentPath,
-        inputs,
-        `${currentParent}${key}`,
-      )
-    }
-  }
-
-  return inputs
-}

package/lib/createRecursiveIntrospectionQuery.ts

@@ -1,13 +0,0 @@
-export const createRecursiveIntrospectionQuery = (type: string, depth: number) => {
-  let baseQuery = `__type(name: "${type}") { name fields { name `
-  let endQuery = ' } }'
-
-  for (let i = 0; i < depth; i++) {
-    baseQuery += 'type { name ofType { name fields { name isDeprecated '
-    endQuery += ' } } }'
-  }
-
-  const result = baseQuery + endQuery
-
-  return result
-}

package/lib/fetchGraphQLInterface.ts

@@ -1,14 +0,0 @@
-import { ApolloClient, NormalizedCacheObject, gql } from '@apollo/client'
-import { createRecursiveIntrospectionQuery } from './createRecursiveIntrospectionQuery'
-
-export const fetchGraphQLInterface = (client: ApolloClient<NormalizedCacheObject>) => {
-  const introspectionQuery = createRecursiveIntrospectionQuery('ProductInterface', 4)
-
-  return client.query({
-    query: gql`
-        query getSchema {
-          ${introspectionQuery}
-        }
-      `,
-  })
-}

package/lib/index.ts

@@ -1,4 +0,0 @@
-export * from './createOptionsFromInterfaceObject'
-export * from './createRecursiveIntrospectionQuery'
-export * from './fetchGraphQLInterface'
-export * from './objectifyGraphQLInterface'

package/lib/objectifyGraphQLInterface.ts

@@ -1,62 +0,0 @@
-import { __Field } from '../types'
-
-/**
- * In this function we create an object from the GraphQL interface.
- * We need this so we can map out the properties of an interface that is needed
- * for the Dynamic Rows Autocomplete.
- * @param fields - The GraphQL interface object that is read from the schema.
- * @returns
- */
-export const objectifyGraphQLInterface = (
-  fields: __Field[] | null,
-  conditionType: 'text' | 'number' | 'all',
-  skip: string[],
-): object => {
-  let objectifiedInterface: object = {}
-
-  if (!fields) return objectifiedInterface
-
-  for (const [, value] of Object.entries(fields)) {
-    const nestedFields = value?.type?.ofType?.fields
-    const { isDeprecated } = value
-    const typeOf = value?.type?.name
-    const typeName = value?.type?.ofType?.name ?? ''
-
-    /**
-     * With typevalue we can know of which type a property is, so we for example can determine to to hide string values in ConditionNumbers.
-     */
-    let typeValue: 'number' | 'text' | 'boolean'
-    switch (typeOf) {
-      case 'Float' || 'Int':
-        typeValue = 'number'
-        break
-      case 'Boolean':
-        typeValue = 'text' // Seperate booleans are not supported yet.
-        break
-      default:
-        typeValue = 'text'
-        break
-    }
-
-    if (skip.includes(typeName) || isDeprecated || !value?.name) {
-      // do nothing
-    } else if (nestedFields) {
-      objectifiedInterface = {
-        ...objectifiedInterface,
-        [value.name]: objectifyGraphQLInterface(nestedFields, conditionType, [...skip, typeName]),
-      }
-    } else if (typeOf && conditionType === 'all') {
-      objectifiedInterface = {
-        ...objectifiedInterface,
-        [value.name]: typeValue,
-      }
-    } else if (conditionType === typeValue) {
-      objectifiedInterface = {
-        ...objectifiedInterface,
-        [value.name]: typeValue,
-      }
-    }
-  }
-
-  return objectifiedInterface
-}