@graphcommerce/ecommerce-ui 8.1.0-canary.41 → 8.1.0-canary.42

package/CHANGELOG.md

@@ -1,5 +1,7 @@
 # @graphcommerce/ecommerce-ui
 
+## 8.1.0-canary.42
+
 ## 8.1.0-canary.41
 
 ## 8.1.0-canary.40

package/components/PreviewMode/LightTooltip.tsx

@@ -0,0 +1,11 @@
+import { styled, Tooltip, tooltipClasses } from '@mui/material'
+
+export const LightTooltip = styled<typeof Tooltip>(({ className, ...props }) => (
+  <Tooltip {...props} classes={{ popper: className }} />
+))(({ theme }) => ({
+  [`& .${tooltipClasses.tooltip}`]: {
+    backgroundColor: theme.palette.common.white,
+    color: theme.palette.text.primary,
+    boxShadow: theme.shadows[1],
+  },
+}))

package/components/PreviewMode/PreviewMode.tsx

@@ -0,0 +1,148 @@
+import { PreviewData } from '@graphcommerce/graphql'
+import {
+  Button,
+  IconSvg,
+  MessageSnackbar,
+  iconChevronRight,
+  iconClose,
+  iconContrast,
+  iconInfo,
+  iconRefresh,
+} from '@graphcommerce/next-ui'
+import { FormAutoSubmit, FormPersist, FormProvider, useForm } from '@graphcommerce/react-hook-form'
+import { Box, IconButton } from '@mui/material'
+import { useRouter } from 'next/router'
+import { TextFieldElement } from '../FormComponents'
+import { LightTooltip } from './LightTooltip'
+import { PreviewModeActions } from './PreviewModeActions'
+import { PreviewModeToolbar } from './PreviewModeToolbar'
+import { previewModeDefaults } from './previewModeDefaults'
+
+export function getPreviewUrl() {
+  const url = new URL(window.location.href)
+  url.pathname = '/api/preview'
+  ;[...url.searchParams.entries()].forEach(([key]) => url.searchParams.delete(key))
+  return url
+}
+
+function PreviewModeEnabled() {
+  const form = useForm<{ secret: string; previewData: PreviewData }>({
+    defaultValues: { previewData: previewModeDefaults() },
+  })
+
+  const submit = form.handleSubmit((formValues) => {
+    const url = getPreviewUrl()
+    url.searchParams.append('action', 'update')
+
+    Object.entries(formValues).forEach(([key, value]) => {
+      url.searchParams.append(key, JSON.stringify(value))
+    })
+
+    window.location.href = url.toString()
+  })
+
+  const exitHandler = form.handleSubmit(() => {
+    const url = getPreviewUrl()
+    url.searchParams.append('action', 'exit')
+
+    window.location.href = url.toString()
+  })
+
+  const revalidateHandler = form.handleSubmit((formValues) => {
+    const url = getPreviewUrl()
+    Object.entries(formValues).forEach(([key, value]) => {
+      url.searchParams.append(key, `${value}`)
+    })
+    url.searchParams.append('action', 'revalidate')
+    window.location.href = url.toString()
+  })
+
+  return (
+    <FormProvider {...form}>
+      <MessageSnackbar
+        variant='pill'
+        severity='warning'
+        disableBackdropClick
+        disableClose
+        open
+        icon={iconContrast}
+        onClose={() => {}}
+        action={
+          <>
+            <PreviewModeActions />
+            <LightTooltip title='Revalidate / Regenerate Page' placement='top'>
+              <IconButton color='secondary' type='submit' onClick={revalidateHandler}>
+                <IconSvg src={iconRefresh} />
+              </IconButton>
+            </LightTooltip>
+            <LightTooltip title='Stop preview mode' placement='top'>
+              <IconButton color='secondary' type='submit' onClick={exitHandler}>
+                <IconSvg src={iconClose} />
+              </IconButton>
+            </LightTooltip>
+          </>
+        }
+      >
+        <Box sx={{ display: 'grid', gridAutoFlow: 'column', placeItems: 'center', gap: 4 }}>
+          <Box sx={{ display: 'flex', placeItems: 'center' }}>
+            Preview Mode{' '}
+            <LightTooltip title='You are currently viewing the website in Preview Mode (caches are disabled).'>
+              <IconButton size='small'>
+                <IconSvg src={iconInfo} />
+              </IconButton>
+            </LightTooltip>
+          </Box>
+          <PreviewModeToolbar />
+        </Box>
+      </MessageSnackbar>
+      <FormPersist form={form} name='PreviewModePreviewData' />
+      <FormAutoSubmit control={form.control} submit={submit} />
+    </FormProvider>
+  )
+}
+
+function PreviewModeDisabled() {
+  const form = useForm<{ secret: string }>({})
+
+  const submit = form.handleSubmit((formValues) => {
+    const url = getPreviewUrl()
+    url.searchParams.append('action', 'enable')
+
+    Object.entries(formValues).forEach(([key, value]) => {
+      url.searchParams.append(key, typeof value === 'string' ? value : JSON.stringify(value))
+    })
+
+    window.location.href = url.toString()
+  })
+
+  return (
+    <FormProvider {...form}>
+      <MessageSnackbar
+        variant='pill'
+        severity='warning'
+        disableBackdropClick
+        disableClose
+        open
+        icon={iconContrast}
+        onClose={() => {}}
+        action={
+          <IconButton color='secondary' type='submit' onClick={submit}>
+            <IconSvg src={iconChevronRight} />
+          </IconButton>
+        }
+      >
+        <Box sx={{ display: 'grid', gridAutoFlow: 'column', placeItems: 'center', gap: 4 }}>
+          <Box sx={{ display: 'flex', placeItems: 'center' }}>Preview Mode</Box>
+          <TextFieldElement control={form.control} name='secret' label='Secret' />
+        </Box>
+      </MessageSnackbar>
+      <FormPersist form={form} name='PreviewModePreviewData' />
+    </FormProvider>
+  )
+}
+
+export function PreviewMode() {
+  const router = useRouter()
+
+  return router.isPreview ? <PreviewModeEnabled /> : <PreviewModeDisabled />
+}

package/components/PreviewMode/PreviewModeActions.tsx

@@ -0,0 +1,6 @@
+export type PreviewModeActionsProps = Record<string, unknown>
+
+export function PreviewModeActions(props: PreviewModeActionsProps) {
+  const {} = props
+  return <></>
+}

package/components/PreviewMode/PreviewModeToolbar.tsx

@@ -0,0 +1,6 @@
+export type PreviewModeToolbarProps = Record<string, unknown>
+
+export function PreviewModeToolbar(props: PreviewModeToolbarProps) {
+  const {} = props
+  return null
+}

package/components/PreviewMode/index.ts

@@ -0,0 +1,5 @@
+export * from './PreviewMode'
+export * from './PreviewModeActions'
+export * from './PreviewModeToolbar'
+export * from './usePreviewModeForm'
+export * from './previewModeDefaults'

package/components/PreviewMode/previewModeDefaults.ts

@@ -0,0 +1,5 @@
+import { PreviewData } from '@graphcommerce/graphql'
+
+export function previewModeDefaults(): PreviewData {
+  return {}
+}

package/components/PreviewMode/usePreviewModeForm.ts

@@ -0,0 +1,6 @@
+import { PreviewData } from '@graphcommerce/graphql'
+import { useFormContext } from '@graphcommerce/react-hook-form'
+
+export function usePreviewModeForm() {
+  return useFormContext<{ previewData: PreviewData }>()
+}

package/components/index.ts

@@ -2,3 +2,4 @@ export * from './ComposedSubmitButton'
 export * from './ApolloError'
 export * from './WaitForQueries'
 export * from './FormComponents'
+export * from './PreviewMode'

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/ecommerce-ui",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "8.1.0-canary.41",
+  "version": "8.1.0-canary.42",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "eslintConfig": {
@@ -12,12 +12,12 @@
     }
   },
   "peerDependencies": {
-    "@graphcommerce/eslint-config-pwa": "^8.1.0-canary.41",
-    "@graphcommerce/graphql": "^8.1.0-canary.41",
-    "@graphcommerce/next-ui": "^8.1.0-canary.41",
-    "@graphcommerce/prettier-config-pwa": "^8.1.0-canary.41",
-    "@graphcommerce/react-hook-form": "^8.1.0-canary.41",
-    "@graphcommerce/typescript-config-pwa": "^8.1.0-canary.41",
+    "@graphcommerce/eslint-config-pwa": "^8.1.0-canary.42",
+    "@graphcommerce/graphql": "^8.1.0-canary.42",
+    "@graphcommerce/next-ui": "^8.1.0-canary.42",
+    "@graphcommerce/prettier-config-pwa": "^8.1.0-canary.42",
+    "@graphcommerce/react-hook-form": "^8.1.0-canary.42",
+    "@graphcommerce/typescript-config-pwa": "^8.1.0-canary.42",
     "@lingui/core": "^4.2.1",
     "@lingui/macro": "^4.2.1",
     "@lingui/react": "^4.2.1",

package/plugins/PreviewModeFramerNextPages.tsx

@@ -0,0 +1,38 @@
+import type { PagesProps } from '@graphcommerce/framer-next-pages'
+import type { PluginConfig, PluginProps } from '@graphcommerce/next-config'
+import dynamic from 'next/dynamic'
+import { useEffect, useState } from 'react'
+
+const PreviewMode = dynamic(
+  async () => (await import('../components/PreviewMode/PreviewMode')).PreviewMode,
+  {},
+)
+
+export const config: PluginConfig = {
+  type: 'component',
+  module: '@graphcommerce/framer-next-pages',
+  ifConfig: 'previewSecret',
+}
+
+export function FramerNextPages(props: PluginProps<PagesProps>) {
+  const { Prev, router, ...rest } = props
+  const [enabled, setEnabled] = useState(router.isPreview)
+
+  useEffect(() => {
+    const handler = (e: KeyboardEvent) => {
+      if (e.altKey && e.code === 'Backquote') {
+        setEnabled((prev) => !prev)
+      }
+    }
+
+    window.addEventListener('keydown', handler, false)
+    return () => window.removeEventListener('keydown', handler)
+  }, [])
+
+  return (
+    <>
+      <Prev {...rest} router={router} />
+      {enabled && <PreviewMode />}
+    </>
+  )
+}

package/route/preview.ts

@@ -0,0 +1,60 @@
+import { PreviewData } from '@graphcommerce/graphql'
+import { NextApiRequest, NextApiResponse } from 'next'
+import { previewModeDefaults } from '../components/PreviewMode/previewModeDefaults'
+
+export default async function handler(req: NextApiRequest, res: NextApiResponse) {
+  const { action } = req.query
+
+  // const domain = req.url ? new URL(req.url) : undefined
+  const referer = req.headers.referer ? new URL(req.headers.referer) : undefined
+  const redirectTo =
+    req.headers.redirectTo ??
+    (referer && req.headers.host === referer.host ? referer.pathname : '/')
+
+  if (!action) {
+    res.status(400).json({ message: 'No action provided' })
+    res.end()
+    return
+  }
+
+  if (action === 'enable' && req.query.secret) {
+    if (req.query.secret !== import.meta.graphCommerce.previewSecret) {
+      // This secret should only be known to this API route and the CMS
+      res.status(401).json({ message: 'Invalid token' })
+      res.end()
+      return
+    }
+
+    res.setDraftMode({ enable: true })
+    const previewData = req.query.previewDat
+      ? (JSON.parse(`${req.query.previewData}`) as PreviewData)
+      : previewModeDefaults()
+
+    res.setPreviewData(previewData)
+  }
+
+  if (action === 'exit') {
+    res.setDraftMode({ enable: false })
+    res.clearPreviewData()
+  }
+
+  if (action === 'revalidate') {
+    const url = referer ? new URL(referer) : undefined
+
+    if (!url) {
+      res.status(401).json({ message: 'No referer header found' })
+      res.end()
+      return
+    }
+
+    await res.revalidate(url.pathname)
+  }
+
+  if (action === 'update' && req.preview && req.query.previewData) {
+    // todo we should probabaly validate this.
+    res.setPreviewData(JSON.parse(`${req.query.previewData}`) as PreviewData)
+  }
+
+  res.writeHead(307, { Location: redirectTo })
+  res.end()
+}