@graphcommerce/ecommerce-ui 8.1.0-canary.8 → 9.0.0-canary.100

package/components/FormComponents/SliderElement.tsx

@@ -1,8 +1,8 @@
 import {
-  Controller,
   ControllerProps,
   FieldError,
   FieldValues,
+  useController,
 } from '@graphcommerce/react-hook-form'
 import { i18n } from '@lingui/core'
 import {
@@ -16,8 +16,6 @@ import {
 
 export type SliderElementProps<T extends FieldValues> = Omit<SliderProps, 'control'> & {
   label?: string
-  /** @deprecated Form value parsing should happen in the handleSubmit function of the form */
-  parseError?: (error: FieldError) => string
   required?: boolean
   formControlProps?: FormControlProps
 } & Omit<ControllerProps<T>, 'render'>
@@ -27,39 +25,40 @@ export function SliderElement<TFieldValues extends FieldValues>({
   control,
   label,
   rules = {},
-  parseError,
   required,
   formControlProps,
+  defaultValue,
+  disabled,
+  shouldUnregister,
   ...other
 }: SliderElementProps<TFieldValues>) {
   if (required && !rules.required) {
     rules.required = i18n._(/* i18n */ 'This field is required')
   }
+
+  const {
+    field,
+    fieldState: { invalid, error },
+  } = useController({
+    name,
+    control,
+    rules,
+    defaultValue,
+    disabled,
+    shouldUnregister,
+  })
+
+  const parsedHelperText = error ? error.message : null
+
   return (
-    <Controller
-      name={name}
-      control={control}
-      rules={rules}
-      render={({ field, fieldState: { invalid, error } }) => {
-        const parsedHelperText = error
-          ? typeof parseError === 'function'
-            ? parseError(error)
-            : error.message
-          : null
-        return (
-          <FormControl error={invalid} required={required} fullWidth {...formControlProps}>
-            {label && (
-              <FormLabel component='legend' error={invalid}>
-                {label}
-              </FormLabel>
-            )}
-            <Slider {...other} {...field} valueLabelDisplay={other.valueLabelDisplay || 'auto'} />
-            {parsedHelperText && (
-              <FormHelperText error={invalid}>{parsedHelperText}</FormHelperText>
-            )}
-          </FormControl>
-        )
-      }}
-    />
+    <FormControl error={invalid} required={required} fullWidth {...formControlProps}>
+      {label && (
+        <FormLabel component='legend' error={invalid}>
+          {label}
+        </FormLabel>
+      )}
+      <Slider {...other} {...field} valueLabelDisplay={other.valueLabelDisplay || 'auto'} />
+      {parsedHelperText && <FormHelperText error={invalid}>{parsedHelperText}</FormHelperText>}
+    </FormControl>
   )
 }

package/components/FormComponents/SwitchElement.tsx

@@ -1,4 +1,4 @@
-import { Controller, FieldValues, ControllerProps } from '@graphcommerce/react-hook-form'
+import { FieldValues, ControllerProps, useController } from '@graphcommerce/react-hook-form'
 import { FormControlLabel, FormControlLabelProps, Switch } from '@mui/material'
 
 type IProps = Omit<FormControlLabelProps, 'control'>
@@ -8,18 +8,20 @@ export type SwitchElementProps<T extends FieldValues> = IProps & Omit<Controller
 export function SwitchElement<TFieldValues extends FieldValues>({
   name,
   control,
+  defaultValue,
+  disabled,
+  shouldUnregister,
+  rules,
   ...other
 }: SwitchElementProps<TFieldValues>) {
-  return (
-    <FormControlLabel
-      control={
-        <Controller
-          name={name}
-          control={control}
-          render={({ field }) => <Switch {...field} checked={!!field.value} />}
-        />
-      }
-      {...other}
-    />
-  )
+  const { field } = useController({
+    name,
+    control,
+    defaultValue,
+    disabled,
+    shouldUnregister,
+    rules,
+  })
+
+  return <FormControlLabel control={<Switch {...field} checked={!!field.value} />} {...other} />
 }

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'
 
@@ -22,7 +27,9 @@ export function TextFieldElement<TFieldValues extends FieldValues>({
   control,
   defaultValue,
   rules = validation,
+  shouldUnregister,
   showValid,
+  disabled,
   ...rest
 }: TextFieldElementProps<TFieldValues>): JSX.Element {
   if (required && !rules.required) {
@@ -31,9 +38,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'),
     }
   }
@@ -41,7 +46,7 @@ export function TextFieldElement<TFieldValues extends FieldValues>({
   const {
     field: { onChange, ref, value = '', ...field },
     fieldState: { error },
-  } = useController({ name, control, rules, defaultValue })
+  } = useController({ name, control, rules, defaultValue, shouldUnregister, disabled })
 
   return (
     <TextField

package/components/FormComponents/ToggleButtonGroup.tsx

@@ -1,8 +1,8 @@
 import {
-  Controller,
   ControllerProps,
   FieldError,
   FieldValues,
+  useController,
 } from '@graphcommerce/react-hook-form'
 import { i18n } from '@lingui/core'
 import {
@@ -25,8 +25,6 @@ type SingleToggleButtonProps = Omit<ToggleButtonProps, 'value' | 'children'> & {
 export type ToggleButtonGroupElementProps<T extends FieldValues> = ToggleButtonGroupProps & {
   required?: boolean
   label?: string
-  /** @deprecated Form value parsing should happen in the handleSubmit function of the form */
-  parseError?: (error: FieldError) => string
   options: SingleToggleButtonProps[]
   formLabelProps?: FormLabelProps
   helperText?: string
@@ -39,9 +37,11 @@ export function ToggleButtonGroupElement<TFieldValues extends FieldValues = Fiel
   rules = {},
   required,
   options = [],
-  parseError,
   helperText,
   formLabelProps,
+  defaultValue,
+  disabled,
+  shouldUnregister,
   ...toggleButtonGroupProps
 }: ToggleButtonGroupElementProps<TFieldValues>) {
   if (required && !rules.required) {
@@ -49,50 +49,51 @@ export function ToggleButtonGroupElement<TFieldValues extends FieldValues = Fiel
   }
 
   const isRequired = required || !!rules?.required
+
+  const {
+    field: { value, onChange, onBlur },
+    fieldState: { invalid, error },
+  } = useController({
+    name,
+    control,
+    rules,
+    defaultValue,
+    disabled,
+    shouldUnregister,
+  })
+
+  const renderHelperText = error ? error.message : helperText
+
   return (
-    <Controller
-      name={name}
-      control={control}
-      rules={rules}
-      render={({ field: { value, onChange, onBlur }, fieldState: { invalid, error } }) => {
-        const renderHelperText = error
-          ? typeof parseError === 'function'
-            ? parseError(error)
-            : error.message
-          : helperText
-        return (
-          <FormControl error={invalid} required={isRequired}>
-            {label && (
-              <FormLabel
-                {...formLabelProps}
-                error={invalid}
-                required={isRequired}
-                sx={{ mb: 1, ...formLabelProps?.sx }}
-              >
-                {label}
-              </FormLabel>
-            )}
-            <ToggleButtonGroup
-              {...toggleButtonGroupProps}
-              value={value}
-              onBlur={onBlur}
-              onChange={(event, val) => {
-                onChange(val)
-                if (typeof toggleButtonGroupProps.onChange === 'function') {
-                  toggleButtonGroupProps.onChange(event, val)
-                }
-              }}
-            >
-              {options.map(({ label, id, ...toggleProps }) => (
-                <ToggleButton value={id} {...toggleProps} key={id}>
-                  {label}
-                </ToggleButton>
-              ))}
-            </ToggleButtonGroup>
-            {renderHelperText && <FormHelperText>{renderHelperText}</FormHelperText>}
-          </FormControl>
-        )
-      }}
-    />
+    <FormControl error={invalid} required={isRequired}>
+      {label && (
+        <FormLabel
+          {...formLabelProps}
+          error={invalid}
+          required={isRequired}
+          sx={{ mb: 1, ...formLabelProps?.sx }}
+        >
+          {label}
+        </FormLabel>
+      )}
+      <ToggleButtonGroup
+        {...toggleButtonGroupProps}
+        value={value}
+        onBlur={onBlur}
+        onChange={(event, val) => {
+          onChange(val)
+          if (typeof toggleButtonGroupProps.onChange === 'function') {
+            toggleButtonGroupProps.onChange(event, val)
+          }
+        }}
+      >
+        {options.map(({ label, id, ...toggleProps }) => (
+          <ToggleButton value={id} {...toggleProps} key={id}>
+            {label}
+          </ToggleButton>
+        ))}
+      </ToggleButtonGroup>
+      {renderHelperText && <FormHelperText>{renderHelperText}</FormHelperText>}
+    </FormControl>
   )
 }

package/components/FormComponents/index.ts

@@ -1,13 +1,16 @@
+export * from './ActionCardListForm'
 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.8",
+  "version": "9.0.0-canary.100",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "eslintConfig": {
@@ -12,12 +12,12 @@
     }
   },
   "peerDependencies": {
-    "@graphcommerce/eslint-config-pwa": "^8.1.0-canary.8",
-    "@graphcommerce/graphql": "^8.1.0-canary.8",
-    "@graphcommerce/next-ui": "^8.1.0-canary.8",
-    "@graphcommerce/prettier-config-pwa": "^8.1.0-canary.8",
-    "@graphcommerce/react-hook-form": "^8.1.0-canary.8",
-    "@graphcommerce/typescript-config-pwa": "^8.1.0-canary.8",
+    "@graphcommerce/eslint-config-pwa": "^9.0.0-canary.100",
+    "@graphcommerce/graphql": "^9.0.0-canary.100",
+    "@graphcommerce/next-ui": "^9.0.0-canary.100",
+    "@graphcommerce/prettier-config-pwa": "^9.0.0-canary.100",
+    "@graphcommerce/react-hook-form": "^9.0.0-canary.100",
+    "@graphcommerce/typescript-config-pwa": "^9.0.0-canary.100",
     "@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()
+}