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

package/CHANGELOG.md

@@ -1,5 +1,100 @@
 # Change Log
 
+## 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

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/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.54",
   "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.54",
+    "@graphcommerce/eslint-config-pwa": "^9.0.0-canary.54",
+    "@graphcommerce/graphql": "^9.0.0-canary.54",
+    "@graphcommerce/image": "^9.0.0-canary.54",
+    "@graphcommerce/next-ui": "^9.0.0-canary.54",
+    "@graphcommerce/prettier-config-pwa": "^9.0.0-canary.54",
+    "@graphcommerce/typescript-config-pwa": "^9.0.0-canary.54",
     "@mui/material": "^5.10.16",
     "next": "*",
     "react": "^18.2.0",

package/plugins/HygraphPreviewModeToolbar.tsx

@@ -0,0 +1,80 @@
+import {
+  usePreviewModeForm,
+  type PreviewModeToolbarProps,
+  SelectElement,
+  previewModeDefaults,
+} 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 = previewModeDefaults().hygraphStage ?? 'PUBLISHED'
+
+  return useMemo(
+    () => (
+      <SelectElement
+        control={control}
+        name='previewData.hygraphStage'
+        defaultValue={defaultValue}
+        color='secondary'
+        select
+        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],
+  )
+})
+
+export const PreviewModeToolbar = (props: PluginProps<PreviewModeToolbarProps>) => {
+  const { Prev, ...rest } = props
+  return (
+    <>
+      <Prev {...rest} />
+      <HygraphConfig />
+    </>
+  )
+}

package/plugins/hygraphGraphqlConfig.ts

@@ -4,6 +4,12 @@ import type { FunctionPlugin } from '@graphcommerce/next-config'
 export const func = 'graphqlConfig'
 export const exported = '@graphcommerce/graphql'
 
+declare module '@graphcommerce/graphql/config' {
+  interface PreviewData {
+    hygraphStage?: string
+  }
+}
+
 const hygraphGraphqlConfig: FunctionPlugin<typeof graphqlConfig> = (prev, config) => {
   const results = prev(config)
 
@@ -14,6 +20,12 @@ 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
   })
 

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