@graphcommerce/graphcms-ui 8.1.0-canary.9 → 9.0.0-canary.101

package/CHANGELOG.md

@@ -1,11 +1,210 @@
 # Change Log
 
+## 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
+
+## 9.0.0-canary.96
+
+## 9.0.0-canary.95
+
+## 9.0.0-canary.94
+
+### Patch Changes
+
+- [#2400](https://github.com/graphcommerce-org/graphcommerce/pull/2400) [`f9f7276`](https://github.com/graphcommerce-org/graphcommerce/commit/f9f7276501127ba8dbb31b6a9670d7f62647573a) - Remove ‘up’ data from the blogoverview page. ([@carlocarels90](https://github.com/carlocarels90))
+
+## 9.0.0-canary.93
+
+## 9.0.0-canary.92
+
+## 9.0.0-canary.91
+
+### Patch Changes
+
+- [#2384](https://github.com/graphcommerce-org/graphcommerce/pull/2384) [`d7c293a`](https://github.com/graphcommerce-org/graphcommerce/commit/d7c293aa49be39f499b46ea57bfda4dbdf67ebe6) - feat(GCOM-1494: Add support for linebreaks in Hygraph content ) ([@FrankHarland](https://github.com/FrankHarland))
+
+## 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
+
+## 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
+
+### Patch Changes
+
+- [#2331](https://github.com/graphcommerce-org/graphcommerce/pull/2331) [`702bfc9`](https://github.com/graphcommerce-org/graphcommerce/commit/702bfc93566c9745546988e57988431d5d4d8cb0) - Moved plugins to new format ([@paales](https://github.com/paales))
+
+## 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
+
+## 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
 
 ### Patch Changes
 
-- [#2223](https://github.com/graphcommerce-org/graphcommerce/pull/2223) [`0ccec63`](https://github.com/graphcommerce-org/graphcommerce/commit/0ccec630825d5fad398366beae90b3c90b2f84b8) - Added helper method to get Hygraph paths
-  ([@bramvanderholst](https://github.com/bramvanderholst))
+- [#2223](https://github.com/graphcommerce-org/graphcommerce/pull/2223) [`0ccec63`](https://github.com/graphcommerce-org/graphcommerce/commit/0ccec630825d5fad398366beae90b3c90b2f84b8) - Added helper method to get Hygraph paths ([@bramvanderholst](https://github.com/bramvanderholst))
 
 ## 8.1.0-canary.8
 
@@ -21,8 +220,7 @@
 
 ### Patch Changes
 
-- [#2219](https://github.com/graphcommerce-org/graphcommerce/pull/2219) [`2ed2055`](https://github.com/graphcommerce-org/graphcommerce/commit/2ed20550324c104265d72f22339fbedb26fb433b) - Allow blog pages to be nested
-  ([@Jessevdpoel](https://github.com/Jessevdpoel))
+- [#2219](https://github.com/graphcommerce-org/graphcommerce/pull/2219) [`2ed2055`](https://github.com/graphcommerce-org/graphcommerce/commit/2ed20550324c104265d72f22339fbedb26fb433b) - Allow blog pages to be nested ([@Jessevdpoel](https://github.com/Jessevdpoel))
 
 ## 8.0.6-canary.2
 
@@ -34,8 +232,7 @@
 
 ### Patch Changes
 
-- [#2238](https://github.com/graphcommerce-org/graphcommerce/pull/2238) [`db86432`](https://github.com/graphcommerce-org/graphcommerce/commit/db864324277fd5fb680c66eaa87d211cd7be4905) - Changed query limit to 100 from a 1000 on HygraphAllPages and AllDynamicRows query and added pagination.
-  ([@Jessevdpoel](https://github.com/Jessevdpoel))
+- [#2238](https://github.com/graphcommerce-org/graphcommerce/pull/2238) [`db86432`](https://github.com/graphcommerce-org/graphcommerce/commit/db864324277fd5fb680c66eaa87d211cd7be4905) - Changed query limit to 100 from a 1000 on HygraphAllPages and AllDynamicRows query and added pagination. ([@Jessevdpoel](https://github.com/Jessevdpoel))
 
 ## 8.0.5-canary.10
 
@@ -43,8 +240,7 @@
 
 ### Patch Changes
 
-- [#2238](https://github.com/graphcommerce-org/graphcommerce/pull/2238) [`db86432`](https://github.com/graphcommerce-org/graphcommerce/commit/db864324277fd5fb680c66eaa87d211cd7be4905) - Changed query limit to 100 from a 1000 on HygraphAllPages and AllDynamicRows query and added pagination.
-  ([@Jessevdpoel](https://github.com/Jessevdpoel))
+- [#2238](https://github.com/graphcommerce-org/graphcommerce/pull/2238) [`db86432`](https://github.com/graphcommerce-org/graphcommerce/commit/db864324277fd5fb680c66eaa87d211cd7be4905) - Changed query limit to 100 from a 1000 on HygraphAllPages and AllDynamicRows query and added pagination. ([@Jessevdpoel](https://github.com/Jessevdpoel))
 
 ## 8.0.5-canary.8
 
@@ -112,11 +308,9 @@
 
 ### Patch Changes
 
-- [#2114](https://github.com/graphcommerce-org/graphcommerce/pull/2114) [`5b63623`](https://github.com/graphcommerce-org/graphcommerce/commit/5b63623e70cb72afa82f6e39cefc77c7b0fec74e) - Added support for the alt attribute for images inside Rich text areas coming from Hygraph.
-  ([@StefanAngenent](https://github.com/StefanAngenent))
+- [#2114](https://github.com/graphcommerce-org/graphcommerce/pull/2114) [`5b63623`](https://github.com/graphcommerce-org/graphcommerce/commit/5b63623e70cb72afa82f6e39cefc77c7b0fec74e) - Added support for the alt attribute for images inside Rich text areas coming from Hygraph. ([@StefanAngenent](https://github.com/StefanAngenent))
 
-- [#2071](https://github.com/graphcommerce-org/graphcommerce/pull/2071) [`6876939`](https://github.com/graphcommerce-org/graphcommerce/commit/68769398f64604443a148583f1392976f71c2423) - Added support to add css class names to RichText elements from Hygraph
-  ([@FrankHarland](https://github.com/FrankHarland))
+- [#2071](https://github.com/graphcommerce-org/graphcommerce/pull/2071) [`6876939`](https://github.com/graphcommerce-org/graphcommerce/commit/68769398f64604443a148583f1392976f71c2423) - Added support to add css class names to RichText elements from Hygraph ([@FrankHarland](https://github.com/FrankHarland))
 
 ## 8.0.0-canary.100
 

package/components/Asset/Asset.graphql

@@ -1,4 +1,4 @@
-fragment Asset on Asset @injectable {
+fragment Asset on Asset {
   url
   width
   height

package/components/Asset/Asset.tsx

@@ -1,5 +1,6 @@
 import { Image, ImageProps } from '@graphcommerce/image'
 import { styled, SxProps, Theme } from '@mui/material'
+import { memo } from 'react'
 import { AssetFragment } from './Asset.gql'
 
 export type { AssetFragment } from './Asset.gql'
@@ -18,7 +19,7 @@ type AssetProps = {
   sx?: SxProps<Theme>
 } & Omit<ImageProps, 'src' | 'width' | 'height' | 'alt' | 'sx'>
 
-export function Asset(props: AssetProps) {
+export const Asset = memo<AssetProps>((props) => {
   const { asset, sx = [], ...imgProps } = props
 
   if (isImage(asset)) {
@@ -55,4 +56,4 @@ export function Asset(props: AssetProps) {
 
   if (process.env.NODE_ENV !== 'production') return <div>{asset.mimeType} not supported</div>
   return null
-}
+})

package/components/RichText/RichText.tsx

@@ -1,5 +1,6 @@
 /* eslint-disable @typescript-eslint/no-use-before-define */
 import { SxProps, Theme } from '@mui/material'
+import React from 'react'
 import { defaultRenderers } from './defaultRenderers'
 import { defaultSxRenderer } from './defaultSxRenderer'
 import {
@@ -33,6 +34,20 @@ function useRenderProps(
   ]
 }
 
+function LineBreakToBr(props: { text: string }) {
+  const { text } = props
+
+  const textA = text.split('\n')
+  const textArray: React.ReactNode[] = []
+  textA.forEach((val, index) => {
+    textArray.push(val)
+    if (index < textA.length - 1) textArray.push(<br />)
+  })
+
+  // eslint-disable-next-line react/no-array-index-key
+  return textArray.map((val, idx) => <React.Fragment key={idx}>{val}</React.Fragment>)
+}
+
 function RenderText({
   text,
   renderers,
@@ -49,11 +64,13 @@ function RenderText({
 
   const sx = useRenderProps({ first, last, sxRenderer }, type)
 
-  if (!type) return <>{text}</>
-
+  if (!type) return <LineBreakToBr text={text} />
   const Component: Renderer<SimpleElement> = renderers[type]
-
-  return <Component sx={sx}>{text}</Component>
+  return (
+    <Component sx={sx}>
+      <LineBreakToBr text={text} />
+    </Component>
+  )
 }
 
 export function isTextNode(node: ElementOrTextNode): node is TextNode {

package/graphql/HygraphPage.graphql

@@ -1,4 +1,4 @@
-fragment HygraphPage on Page @injectable {
+fragment HygraphPage on Page {
   title
   metaTitle
   metaDescription

package/graphql/PageLink.graphql

@@ -1,4 +1,4 @@
-fragment PageLink on PageLink @injectable {
+fragment PageLink on PageLink {
   title
   url
   description {

package/index.ts

@@ -1,4 +1,3 @@
 export * from './components'
 export * from './graphql'
 export * from './lib'
-export * from './links/createHygraphLink'

package/lib/getAllHygraphPages.ts

@@ -1,4 +1,5 @@
 import type { ApolloClient, NormalizedCacheObject, ApolloQueryResult } from '@apollo/client'
+import { cacheFirst } from '@graphcommerce/graphql'
 import { HygraphAllPagesDocument, HygraphAllPagesQuery } from '../graphql'
 
 type Urls = { url: string }
@@ -8,10 +9,11 @@ export async function getAllHygraphPages(
   options: { pageSize?: number } = {},
 ) {
   const { pageSize = 100 } = options
+
   const query = client.query({
     query: HygraphAllPagesDocument,
     variables: { first: pageSize },
-    fetchPolicy: process.env.NODE_ENV !== 'development' ? 'cache-first' : undefined,
+    fetchPolicy: cacheFirst(client),
   })
   const pages: Promise<ApolloQueryResult<HygraphAllPagesQuery>>[] = [query]
 
@@ -24,7 +26,7 @@ export async function getAllHygraphPages(
         client.query({
           query: HygraphAllPagesDocument,
           variables: { first: pageSize, skip: pageSize * (i - 1) },
-          fetchPolicy: process.env.NODE_ENV !== 'development' ? 'cache-first' : undefined,
+          fetchPolicy: cacheFirst(client),
         }),
       )
     }

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/graphcms-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,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "eslintConfig": {
@@ -12,12 +12,13 @@
     }
   },
   "peerDependencies": {
-    "@graphcommerce/eslint-config-pwa": "^8.1.0-canary.9",
-    "@graphcommerce/graphql": "^8.1.0-canary.9",
-    "@graphcommerce/image": "^8.1.0-canary.9",
-    "@graphcommerce/next-ui": "^8.1.0-canary.9",
-    "@graphcommerce/prettier-config-pwa": "^8.1.0-canary.9",
-    "@graphcommerce/typescript-config-pwa": "^8.1.0-canary.9",
+    "@graphcommerce/ecommerce-ui": "^9.0.0-canary.101",
+    "@graphcommerce/eslint-config-pwa": "^9.0.0-canary.101",
+    "@graphcommerce/graphql": "^9.0.0-canary.101",
+    "@graphcommerce/image": "^9.0.0-canary.101",
+    "@graphcommerce/next-ui": "^9.0.0-canary.101",
+    "@graphcommerce/prettier-config-pwa": "^9.0.0-canary.101",
+    "@graphcommerce/typescript-config-pwa": "^9.0.0-canary.101",
     "@mui/material": "^5.10.16",
     "next": "*",
     "react": "^18.2.0",

package/plugins/HygraphPreviewModeToolbar.tsx

@@ -0,0 +1,83 @@
+import {
+  usePreviewModeForm,
+  type PreviewModeToolbarProps,
+  SelectElement,
+  previewModeDefaults,
+  useWatch,
+} from '@graphcommerce/ecommerce-ui'
+import { TypedDocumentNode, gql, useQuery } from '@graphcommerce/graphql'
+import type { PluginConfig, PluginProps } from '@graphcommerce/next-config'
+import { filterNonNullableKeys } from '@graphcommerce/next-ui'
+import React, { useMemo } from 'react'
+
+export const config: PluginConfig = {
+  type: 'component',
+  module: '@graphcommerce/ecommerce-ui',
+}
+
+const ContentStages = gql`
+  query {
+    __type(name: "Stage") {
+      name
+      enumValues {
+        name
+        description
+      }
+    }
+  }
+` as TypedDocumentNode<{
+  __type: {
+    name: 'Stage'
+    enumValues: {
+      name: string
+      description: string
+    }[]
+  }
+}>
+
+const HygraphConfig = React.memo(() => {
+  const form = usePreviewModeForm()
+  const { control } = form
+
+  const contentStages = useQuery(ContentStages)
+
+  const defaultValue =
+    useWatch({ control, name: 'previewData.hygraphStage' }) ??
+    previewModeDefaults().hygraphStage ??
+    'PUBLISHED'
+
+  return useMemo(
+    () => (
+      <SelectElement
+        control={control}
+        name='previewData.hygraphStage'
+        color='secondary'
+        defaultValue={defaultValue}
+        label='Hygraph Stage'
+        size='small'
+        sx={{ width: '150px' }}
+        SelectProps={{ MenuProps: { style: { zIndex: 20000 } } }}
+        onChange={() => {}}
+        options={
+          contentStages.loading
+            ? [{ id: defaultValue, label: defaultValue }]
+            : filterNonNullableKeys(contentStages.data?.__type.enumValues).map(({ name }) => ({
+                id: name,
+                label: name,
+              }))
+        }
+      />
+    ),
+    [contentStages.data?.__type.enumValues, contentStages.loading, control, defaultValue],
+  )
+})
+
+export const PreviewModeToolbar = (props: PluginProps<PreviewModeToolbarProps>) => {
+  const { Prev, ...rest } = props
+  return (
+    <>
+      <Prev {...rest} />
+      <HygraphConfig />
+    </>
+  )
+}

package/plugins/hygraphGraphqlConfig.ts

@@ -1,10 +1,18 @@
-import { graphqlConfig, setContext } from '@graphcommerce/graphql'
-import type { FunctionPlugin } from '@graphcommerce/next-config'
+import { graphqlConfig as graphqlConfigType, setContext } from '@graphcommerce/graphql'
+import type { FunctionPlugin, PluginConfig } from '@graphcommerce/next-config'
 
-export const func = 'graphqlConfig'
-export const exported = '@graphcommerce/graphql'
+export const config: PluginConfig = {
+  type: 'function',
+  module: '@graphcommerce/graphql',
+}
+
+declare module '@graphcommerce/graphql/config' {
+  interface PreviewData {
+    hygraphStage?: string
+  }
+}
 
-const hygraphGraphqlConfig: FunctionPlugin<typeof graphqlConfig> = (prev, config) => {
+export const graphqlConfig: FunctionPlugin<typeof graphqlConfigType> = (prev, config) => {
   const results = prev(config)
 
   const locales = config.storefront.hygraphLocales
@@ -14,10 +22,14 @@ const hygraphGraphqlConfig: FunctionPlugin<typeof graphqlConfig> = (prev, config
   const hygraphLink = setContext((_, context) => {
     if (!context.headers) context.headers = {}
     context.headers['gcms-locales'] = locales.join(',')
+
+    const stage = config.previewData?.hygraphStage ?? 'DRAFT'
+    if (config.preview) {
+      context.headers['gcms-stage'] = stage
+    }
+
     return context
   })
 
   return { ...results, links: [...results.links, hygraphLink] }
 }
-
-export const plugin = hygraphGraphqlConfig

package/plugins/hygraphPreviewModeDefaults.ts

@@ -0,0 +1,12 @@
+import { previewModeDefaults as base } from '@graphcommerce/ecommerce-ui'
+import type { FunctionPlugin, PluginConfig } from '@graphcommerce/next-config'
+
+export const config: PluginConfig = {
+  type: 'function',
+  module: '@graphcommerce/ecommerce-ui',
+}
+
+export const previewModeDefaults: FunctionPlugin<typeof base> = (prev, ...args) => ({
+  ...prev(...args),
+  hygraphStage: 'DRAFT',
+})

package/links/createHygraphLink.ts

@@ -1,13 +0,0 @@
-import { setContext } from '@graphcommerce/graphql'
-import { storefrontConfig } from '@graphcommerce/next-ui'
-
-/** Add a gcms-locales header to make sure queries return in a certain language. */
-export const createHygraphLink = (locale?: string) =>
-  setContext((_, context) => {
-    if (!context.headers) context.headers = {}
-
-    const locales = storefrontConfig(locale)?.hygraphLocales
-    if (locales) context.headers['gcms-locales'] = locales.join(',')
-
-    return context
-  })