@graphcommerce/hygraph-dynamic-rows-ui 7.1.0-canary.54

package/CHANGELOG.md

@@ -0,0 +1,7 @@
+# @graphcommerce/hygraph-dynamic-rows-ui
+
+## 7.1.0-canary.54
+
+### Minor Changes
+
+- [#2100](https://github.com/graphcommerce-org/graphcommerce/pull/2100) [`4df891a4c`](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))

package/components/PropertyPicker.tsx

@@ -0,0 +1,124 @@
+import { useFieldExtension } from '@hygraph/app-sdk-react'
+// eslint-disable-next-line @typescript-eslint/no-restricted-imports
+import { TextField } from '@mui/material'
+import { useEffect, useMemo, useState } from 'react'
+import { ApolloClient, InMemoryCache } from '@apollo/client'
+import { fetchGraphQLInterface } from '../lib/fetchGraphQLInterface'
+import { createOptionsFromInterfaceObject, objectifyGraphQLInterface } from '../lib'
+
+export function PropertyPicker() {
+  const { value, onChange, field, extension } = useFieldExtension()
+  const [localValue, setLocalValue] = useState<string | undefined | null>(
+    typeof value === 'string' ? value : undefined,
+  )
+  const [fields, setFields] = useState<any>(null)
+
+  useEffect(() => {
+    onChange(localValue).catch((err) => console.log(err))
+  }, [localValue, onChange])
+
+  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(),
+  })
+
+  const graphQLInterfaceQuery = useMemo(() => fetchGraphQLInterface(client), [client])
+
+  // 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 fields = res?.data.__type?.fields
+
+      setFields(fields)
+    })
+    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>
+
+  return (
+    <TextField
+      id='property-selector'
+      select
+      SelectProps={{
+        native: true,
+        variant: 'outlined',
+      }}
+      value={localValue}
+      onChange={(v) => {
+        const val = v.target.value
+        setLocalValue(val)
+      }}
+      fullWidth
+      sx={{
+        mt: '4px',
+        '& .MuiInputBase-root': {
+          borderRadius: { xs: '2px!important' },
+        },
+        '& .MuiOutlinedInput-root': {
+          '& fieldset.MuiOutlinedInput-notchedOutline': {
+            borderColor: { xs: 'rgb(208, 213, 231)' },
+            transition: 'border-color 0.25s ease 0s',
+          },
+          '&:hover': {
+            '& fieldset.MuiOutlinedInput-notchedOutline': {
+              borderColor: { xs: 'rgb(208, 213, 231)' },
+            },
+          },
+          '&.Mui-focused': {
+            '& fieldset.MuiOutlinedInput-notchedOutline': {
+              borderColor: { xs: 'rgb(90, 92, 236)' },
+            },
+          },
+        },
+        '& .MuiInputLabel-root.Mui-focused': {
+          color: { xs: 'rgb(90, 92, 236)' },
+        },
+      }}
+    >
+      {options.map((o) => (
+        <option key={o.id} value={o.id}>
+          {o.label}
+        </option>
+      ))}
+    </TextField>
+  )
+}

package/components/Setup.tsx

@@ -0,0 +1,103 @@
+import { useApp, Wrapper } from '@hygraph/app-sdk-react'
+import styles from './setup.module.css'
+import { useState } from 'react'
+
+function Install() {
+  // @ts-ignore - outdated types from @hygraph/app-sdk-react
+  const { updateInstallation, installation, showToast, extension } = useApp()
+  const installed = installation.status === 'COMPLETED'
+  const [gqlUri, setGqlUri] = useState('')
+
+  const saveOnClick = () => {
+    updateInstallation({
+      config: { backend: gqlUri },
+      status: 'COMPLETED',
+    }).then(() =>
+      showToast({
+        title: 'New GraphQL URI saved',
+        description: `${gqlUri} is now the GraphQL URI for this application.}`,
+        duration: 5000,
+        isClosable: true,
+        position: 'top-left',
+        variantColor: 'success',
+      }).catch((err) => console.log(err)),
+    )
+  }
+
+  const changedUri = extension.config.backend !== gqlUri
+
+  const installOnClick = () =>
+    updateInstallation({
+      config: { backend: gqlUri },
+      status: 'COMPLETED',
+    }).then(() =>
+      showToast({
+        title: 'Application enabled',
+        description: 'You can now use the Dynamic Row Property Selector field in your schema.',
+        duration: 5000,
+        isClosable: true,
+        position: 'top-left',
+        variantColor: 'success',
+      }).catch((err) => console.log(err)),
+    )
+
+  const uninstallOnClick = async () => {
+    updateInstallation({
+      config: {},
+      status: 'DISABLED',
+    })
+      .then(() => {
+        showToast({
+          title: 'Application disabled',
+          description: 'You can re-enable the application from the application configuration page.',
+          duration: 5000,
+          isClosable: true,
+          position: 'top-left',
+          variantColor: 'success',
+        })
+      })
+      .catch((error) => {
+        console.error('Error updating installation', error)
+      })
+
+    return 0
+  }
+
+  return (
+    <>
+      <>
+        <span>GraphQL API URI</span>
+        <input
+          name='gql-uri'
+          defaultValue={extension.config.backend}
+          onChange={(e) => setGqlUri(e.target.value)}
+        />
+      </>
+
+      <button
+        type='button'
+        className={styles.button}
+        onClick={changedUri ? saveOnClick : installed ? uninstallOnClick : installOnClick}
+      >
+        {changedUri ? 'Save' : installed ? 'Disable app' : 'Enable app'}
+      </button>
+    </>
+  )
+}
+
+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>
+  )
+}

package/components/index.ts

@@ -0,0 +1 @@
+export * from './PropertyPicker'

package/components/setup.module.css

@@ -0,0 +1,58 @@
+.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;
+}
+
+.title {
+  font-size: 24px;
+  font-weight: 600;
+  line-height: 32px;
+  margin-bottom: 16px;
+}
+
+.desciption {
+  font-size: 14px;
+  font-weight: 300;
+  line-height: 20px;
+  margin-bottom: 16px;
+}
+
+.input {
+  display: inline;
+}
+
+.button {
+  user-select: none;
+  box-sizing: border-box;
+  appearance: none;
+  position: relative;
+  display: inline-flex;
+  -webkit-box-align: center;
+  align-items: center;
+  text-align: center;
+  vertical-align: middle;
+  align-self: center;
+  text-decoration: none;
+  font-weight: 500;
+  border: 0px;
+  margin: 16px 0px 0px;
+  border-radius: 4px;
+  font-size: 12px;
+  line-height: 16px;
+  height: 24px;
+  min-width: 24px;
+  padding-left: 8px;
+  padding-right: 8px;
+  color: rgb(255, 255, 255);
+  background-color: rgb(90, 92, 236);
+}
+
+.button:hover {
+  cursor: pointer;
+  background-color: rgb(58, 48, 166);
+}

package/index.ts

@@ -0,0 +1,2 @@
+export * from './components/Setup'
+export * from './components'

package/lib/createOptionsFromInterfaceObject.ts

@@ -0,0 +1,42 @@
+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

@@ -0,0 +1,13 @@
+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

@@ -0,0 +1,14 @@
+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

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

package/lib/objectifyGraphQLInterface.ts

@@ -0,0 +1,62 @@
+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
+}

package/next-env.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.

package/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "@graphcommerce/hygraph-dynamic-rows-ui",
+  "homepage": "https://www.graphcommerce.org/",
+  "repository": "github:graphcommerce-org/graphcommerce",
+  "version": "7.1.0-canary.54",
+  "sideEffects": false,
+  "type": "commonjs",
+  "prettier": "@graphcommerce/prettier-config-pwa",
+  "eslintConfig": {
+    "extends": "@graphcommerce/eslint-config-pwa",
+    "parserOptions": {
+      "project": "./tsconfig.json"
+    }
+  },
+  "scripts": {
+    "dev": "next dev"
+  },
+  "dependencies": {
+    "@apollo/client": "~3.8.7",
+    "@graphcommerce/next-config": "7.1.0-canary.54",
+    "@hygraph/app-sdk-react": "^0.0.2",
+    "@mui/material": "5.14.7",
+    "cross-env": "^7.0.3",
+    "dotenv": "16.3.1",
+    "graphql": "^16.8.1",
+    "next": "^13.2.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "webpack": "5.88.2"
+  },
+  "devDependencies": {
+    "@graphcommerce/eslint-config-pwa": "7.1.0-canary.54",
+    "@graphcommerce/prettier-config-pwa": "7.1.0-canary.54",
+    "@graphcommerce/typescript-config-pwa": "7.1.0-canary.54",
+    "@types/react-is": "^18.2.0",
+    "eslint": "8.53.0",
+    "typescript": "5.1.3"
+  }
+}

package/pages/_app.tsx

@@ -0,0 +1,5 @@
+function MyApp({ Component, pageProps }) {
+  return <Component {...pageProps} />
+}
+
+export default MyApp

package/pages/property-picker.tsx

@@ -0,0 +1,71 @@
+import { ApolloClient, HttpLink, InMemoryCache } from '@apollo/client'
+import { loadConfig } from '@graphcommerce/next-config'
+import { Wrapper } from '@hygraph/app-sdk-react'
+import React from 'react'
+import { PropertyPicker } from '..'
+import {
+  createOptionsFromInterfaceObject,
+  objectifyGraphQLInterface,
+  fetchGraphQLInterface,
+} from '../lib'
+import { Interface } from '../types'
+
+type PropertyPickerProps = Interface
+
+export default function DRPropertyPicker(props: PropertyPickerProps) {
+  const fieldContainer = React.useRef<HTMLDivElement | null>(null)
+
+  React.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'
+      frameBox1.style.minHeight = 'unset'
+    }
+
+    const frameBox2 = frameBox1?.previousSibling as HTMLDivElement | null
+    if (frameBox2) {
+      frameBox2.style.minHeight = 'unset'
+    }
+
+    const body = frameBox1?.parentElement
+    if (body) {
+      body.style.margin = '0'
+    }
+
+    const html = body?.parentElement
+    if (html) {
+      html.style.background = 'transparent'
+      html.style.overflow = 'hidden'
+    }
+  }, [fieldContainer])
+
+  return (
+    <div ref={fieldContainer}>
+      <Wrapper>
+        <PropertyPicker />
+      </Wrapper>
+    </div>
+  )
+}
+
+export const getStaticProps = async () => {
+  const config = loadConfig(process.cwd())
+  const staticClient = new ApolloClient({
+    link: new HttpLink({
+      uri: config.magentoEndpoint,
+      fetch,
+    }),
+    cache: new InMemoryCache(),
+  })
+  const graphQLInterface = fetchGraphQLInterface(staticClient)
+
+  return {
+    props: {
+      ...(await graphQLInterface).data,
+    },
+  }
+}

package/pages/setup.tsx

@@ -0,0 +1,29 @@
+import React, { MutableRefObject, ReactNode, RefObject } from 'react'
+import { Page } from '..'
+
+export default function Setup() {
+  const appContainer = React.useRef<HTMLDivElement | null>(null)
+
+  /**
+   * This is a hack to fix the height of the iframe, which was malfunctioning because of a conflict
+   * with FramerNextPages
+   */
+  React.useEffect(() => {
+    const framerParent = appContainer?.current?.parentElement
+    if (framerParent) {
+      framerParent.style.position = 'static'
+      framerParent.style.minHeight = 'unset'
+    }
+
+    const framerParent2 = framerParent?.previousSibling as HTMLDivElement | null
+    if (framerParent2) {
+      framerParent2.style.minHeight = 'unset'
+    }
+  }, [appContainer])
+
+  return (
+    <div ref={appContainer}>
+      <Page />
+    </div>
+  )
+}

package/tsconfig.json

@@ -0,0 +1,5 @@
+{
+  "exclude": ["**/node_modules", "**/.*/"],
+  "include": ["**/*.ts", "**/*.tsx"],
+  "extends": "@graphcommerce/typescript-config-pwa/nextjs.json"
+}

package/types/index.ts

@@ -0,0 +1,38 @@
+export type ProductProperty = {
+  label: string
+  id: string
+  type?: string
+}
+
+export type Interface = {
+  __type: __Type
+}
+
+export type __Type = {
+  kind?: __TypeKind
+  name?: string
+  description?: string
+  fields: __Field[]
+  ofType?: { name?: string; fields: __Field[] }
+}
+
+export type __TypeKind =
+  | 'SCALAR'
+  | 'OBJECT'
+  | 'INTERFACE'
+  | 'UNION'
+  | 'ENUM'
+  | 'INPUT_OBJECT'
+  | 'LIST'
+  | 'NON_NULL'
+
+export type __Field = {
+  name: string
+  type: __Type
+  isDeprecated: boolean
+  description?: string
+}
+
+export type Option = { id: string; label: string }
+
+export type Options = { text: Option[]; number: Option[] }