@graphcommerce/ecommerce-ui 8.1.0-canary.5 → 8.1.0-canary.50

package/CHANGELOG.md

@@ -1,5 +1,105 @@
 # @graphcommerce/ecommerce-ui
 
+## 8.1.0-canary.50
+
+## 8.1.0-canary.49
+
+## 8.1.0-canary.48
+
+### Minor Changes
+
+- [#2319](https://github.com/graphcommerce-org/graphcommerce/pull/2319) [`a3409e8`](https://github.com/graphcommerce-org/graphcommerce/commit/a3409e8a629ee95413da6547cbdcf48aa2502c23) - Created a new TelephoneElement component to make re-use easier
+  ([@Giovanni-Schroevers](https://github.com/Giovanni-Schroevers))
+
+## 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
+
+## 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
+
+### Patch Changes
+
+- [#2301](https://github.com/graphcommerce-org/graphcommerce/pull/2301) [`13d0649`](https://github.com/graphcommerce-org/graphcommerce/commit/13d06498d121f93b52c25930e50aa3b0bd12a818) - Created a new EmailElement component to make re-use easier
+  ([@Giovanni-Schroevers](https://github.com/Giovanni-Schroevers))
+
+## 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
+
+## 8.1.0-canary.7
+
+## 8.1.0-canary.6
+
 ## 8.1.0-canary.5
 
 ## 8.0.6-canary.4

package/components/FormComponents/EmailElement.tsx

@@ -0,0 +1,27 @@
+import { emailPattern, FieldValues } from '@graphcommerce/react-hook-form'
+import { i18n } from '@lingui/core'
+import { Trans } from '@lingui/react'
+import { TextFieldElement, TextFieldElementProps } from './TextFieldElement'
+
+export type EmailElementProps<T extends FieldValues> = TextFieldElementProps<T>
+
+export function EmailElement<TFieldValues extends FieldValues>(
+  props: EmailElementProps<TFieldValues>,
+): JSX.Element {
+  const { rules, ...rest } = props
+  return (
+    <TextFieldElement
+      type='email'
+      label={<Trans id='Email address' />}
+      autoComplete='email'
+      rules={{
+        pattern: {
+          value: emailPattern,
+          message: i18n._(/* i18n */ 'Please enter a valid email address'),
+        },
+        ...rules,
+      }}
+      {...rest}
+    />
+  )
+}

package/components/FormComponents/NumberFieldElement.tsx

@@ -115,7 +115,11 @@ export function NumberFieldElement<T extends FieldValues>(props: NumberFieldElem
             aria-label={i18n._(/* i18n */ 'Decrease')}
             size='smaller'
             onClick={() => {
-              if ((valueAsNumber || Infinity) <= inputProps.min) return
+              if (
+                (valueAsNumber || Infinity) <= inputProps.min ||
+                (inputProps.min === 0 && valueAsNumber <= inputProps.min)
+              )
+                return
               onChange(value - 1)
             }}
             sx={{

package/components/FormComponents/TelephoneElement.tsx

@@ -0,0 +1,23 @@
+import { FieldValues, phonePattern } from '@graphcommerce/react-hook-form'
+import { Trans, t } from '@lingui/macro'
+import { TextFieldElement, TextFieldElementProps } from './TextFieldElement'
+
+export type TelephoneElementProps<T extends FieldValues> = TextFieldElementProps<T>
+
+export function TelephoneElement<TFieldValues extends FieldValues>(
+  props: TelephoneElementProps<TFieldValues>,
+): JSX.Element {
+  const { rules, ...rest } = props
+  return (
+    <TextFieldElement
+      type='text'
+      label={<Trans>Telephone</Trans>}
+      autoComplete='tel'
+      rules={{
+        pattern: { value: phonePattern, message: t`Invalid phone number` },
+        ...rules,
+      }}
+      {...rest}
+    />
+  )
+}

package/components/FormComponents/TextFieldElement.tsx

@@ -1,6 +1,11 @@
 /* eslint-disable no-nested-ternary */
 import { InputCheckmark } from '@graphcommerce/next-ui'
-import { FieldValues, UseControllerProps, useController } from '@graphcommerce/react-hook-form'
+import {
+  FieldValues,
+  UseControllerProps,
+  emailPattern,
+  useController,
+} from '@graphcommerce/react-hook-form'
 import { i18n } from '@lingui/core'
 import { TextField, TextFieldProps } from '@mui/material'
 
@@ -31,9 +36,7 @@ export function TextFieldElement<TFieldValues extends FieldValues>({
 
   if (type === 'email' && !rules.pattern) {
     rules.pattern = {
-      // eslint-disable-next-line no-useless-escape
-      value:
-        /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/,
+      value: emailPattern,
       message: i18n._(/* i18n */ 'Please enter a valid email address'),
     }
   }

package/components/FormComponents/index.ts

@@ -1,13 +1,15 @@
 export * from './AutoCompleteElement'
 export * from './CheckboxButtonGroup'
 export * from './CheckboxElement'
+export * from './EmailElement'
 export * from './MultiSelectElement'
+export * from './NumberFieldElement'
 export * from './PasswordElement'
 export * from './PasswordRepeatElement'
-export * from './NumberFieldElement'
-export * from './SliderElement'
-export * from './SwitchElement'
 export * from './RadioButtonGroup'
 export * from './SelectElement'
+export * from './SliderElement'
+export * from './SwitchElement'
+export * from './TelephoneElement'
 export * from './TextFieldElement'
 export * from './ToggleButtonGroup'

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.5",
+  "version": "8.1.0-canary.50",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "eslintConfig": {
@@ -12,12 +12,12 @@
     }
   },
   "peerDependencies": {
-    "@graphcommerce/eslint-config-pwa": "^8.1.0-canary.5",
-    "@graphcommerce/graphql": "^8.1.0-canary.5",
-    "@graphcommerce/next-ui": "^8.1.0-canary.5",
-    "@graphcommerce/prettier-config-pwa": "^8.1.0-canary.5",
-    "@graphcommerce/react-hook-form": "^8.1.0-canary.5",
-    "@graphcommerce/typescript-config-pwa": "^8.1.0-canary.5",
+    "@graphcommerce/eslint-config-pwa": "^8.1.0-canary.50",
+    "@graphcommerce/graphql": "^8.1.0-canary.50",
+    "@graphcommerce/next-ui": "^8.1.0-canary.50",
+    "@graphcommerce/prettier-config-pwa": "^8.1.0-canary.50",
+    "@graphcommerce/react-hook-form": "^8.1.0-canary.50",
+    "@graphcommerce/typescript-config-pwa": "^8.1.0-canary.50",
     "@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()
+}