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

package/PageMeta/PageMeta.tsx

@@ -1,13 +1,7 @@
 import { usePageContext } from '@graphcommerce/framer-next-pages'
-import { addBasePath } from 'next/dist/client/add-base-path'
-import { addLocale } from 'next/dist/client/add-locale'
-import { getDomainLocale } from 'next/dist/client/get-domain-locale'
-import { resolveHref } from 'next/dist/client/resolve-href'
-import { NextRouter } from 'next/dist/shared/lib/router/router'
 import Head from 'next/head'
-import { useRouter } from 'next/router'
 import type {} from '@graphcommerce/next-config'
-import { storefrontConfig } from '../hooks'
+import { Canonical, useCanonical } from './canonicalize'
 
 // https://developers.google.com/search/docs/advanced/robots/robots_meta_tag#directives
 export type MetaRobots =
@@ -23,8 +17,6 @@ export type MetaRobots =
   | `max-video-preview:${number}`
 type MetaRobotsAll = ['all' | 'none']
 
-type Canonical = `http://${string}` | `https://${string}` | `/${string}` | string
-
 export type PageMetaProps = {
   title: string
   canonical?: Canonical
@@ -36,68 +28,6 @@ export type PageMetaProps = {
   ogType?: string | null
 }
 
-type PartialNextRouter = Pick<
-  NextRouter,
-  'pathname' | 'locale' | 'locales' | 'isLocaleDomain' | 'domainLocales' | 'defaultLocale'
->
-export function canonicalize(router: PartialNextRouter, incoming?: Canonical) {
-  let canonical = incoming
-
-  if (!canonical) return canonical
-
-  if (!canonical.startsWith('http') && !canonical.startsWith('/')) {
-    if (process.env.NODE_ENV !== 'production') {
-      console.warn(
-        `canonical is relative (${canonical}), a canonical must start with '/', 'http://' or 'https://'`,
-      )
-    }
-    canonical = `/${canonical}`
-  }
-
-  if (canonical.startsWith('/')) {
-    let [href, as = href] = resolveHref(router as NextRouter, canonical, true)
-
-    const curLocale = router.locale
-
-    // Copied from here https://github.com/vercel/next.js/blob/213c42f446874d29d07fa2cca6e6b11fc9c3b711/packages/next/client/link.tsx#L512
-    const localeDomain = getDomainLocale(
-      as,
-      curLocale,
-      router && router.locales,
-      router.domainLocales,
-    )
-
-    if (localeDomain) {
-      canonical = localeDomain
-    } else {
-      href = addBasePath(addLocale(as, curLocale, router.defaultLocale))
-
-      let siteUrl =
-        storefrontConfig(router.locale)?.canonicalBaseUrl ||
-        import.meta.graphCommerce.canonicalBaseUrl
-      if (siteUrl.endsWith('/')) siteUrl = siteUrl.slice(0, -1)
-
-      canonical = `${siteUrl}${href}`
-    }
-  }
-
-  if (!canonical.startsWith('http')) {
-    if (process.env.NODE_ENV !== 'production') {
-      throw new Error(
-        `canonical must start with '/', 'http://' or 'https://', '${canonical}' given`,
-      )
-    }
-    canonical = undefined
-  }
-
-  return canonical
-}
-
-export function useCanonical(incoming?: Canonical) {
-  const router = useRouter()
-  return canonicalize(router, incoming)
-}
-
 export function PageMeta(props: PageMetaProps) {
   const { active } = usePageContext()
   const {

package/PageMeta/canonicalize.ts

@@ -0,0 +1,78 @@
+import { addBasePath } from 'next/dist/client/add-base-path'
+import { addLocale } from 'next/dist/client/add-locale'
+import { getDomainLocale } from 'next/dist/client/get-domain-locale'
+import { resolveHref } from 'next/dist/client/resolve-href'
+import { NextRouter } from 'next/dist/shared/lib/router/router'
+import type {} from '@graphcommerce/next-config'
+import { useRouter } from 'next/router'
+import { storefrontConfig } from '../utils/storefrontConfig'
+
+type PartialNextRouter = Pick<
+  NextRouter,
+  'pathname' | 'locale' | 'locales' | 'isLocaleDomain' | 'domainLocales' | 'defaultLocale'
+>
+
+export function canonicalize(router: PartialNextRouter, incoming?: Canonical) {
+  let canonical = incoming
+
+  if (!canonical) return canonical
+
+  if (!canonical.startsWith('http') && !canonical.startsWith('/')) {
+    if (process.env.NODE_ENV !== 'production') {
+      console.warn(
+        `canonical is relative (${canonical}), a canonical must start with '/', 'http://' or 'https://'`,
+      )
+    }
+    canonical = `/${canonical}`
+  }
+
+  if (canonical.startsWith('/')) {
+    let [href, as = href] = resolveHref(router as NextRouter, canonical, true)
+
+    const curLocale = router.locale
+
+    // Copied from here https://github.com/vercel/next.js/blob/213c42f446874d29d07fa2cca6e6b11fc9c3b711/packages/next/client/link.tsx#L512
+    const localeDomain = getDomainLocale(
+      as,
+      curLocale,
+      router && router.locales,
+      router.domainLocales,
+    )
+
+    if (localeDomain) {
+      canonical = localeDomain
+    } else {
+      const conf = storefrontConfig(router.locale)
+
+      href = addBasePath(
+        addLocale(as, curLocale, conf?.domain ? conf.locale : router.defaultLocale),
+      )
+
+      let siteUrl = conf?.canonicalBaseUrl || import.meta.graphCommerce.canonicalBaseUrl
+
+      if (conf?.domain && !conf?.canonicalBaseUrl) siteUrl = `https://${conf.domain}`
+
+      if (siteUrl.endsWith('/')) siteUrl = siteUrl.slice(0, -1)
+
+      canonical = `${siteUrl}${href}`
+    }
+  }
+
+  if (!canonical.startsWith('http')) {
+    if (process.env.NODE_ENV !== 'production') {
+      throw new Error(
+        `canonical must start with '/', 'http://' or 'https://', '${canonical}' given`,
+      )
+    }
+    canonical = undefined
+  }
+
+  return canonical
+}
+
+export type Canonical = `http://${string}` | `https://${string}` | `/${string}` | string
+
+export function useCanonical(incoming?: Canonical) {
+  const router = useRouter()
+  return canonicalize(router, incoming)
+}

package/Pagination/PaginationExtended.tsx

@@ -0,0 +1,103 @@
+import {
+  PaginationProps,
+  Box,
+  SxProps,
+  Theme,
+  Pagination,
+  PaginationItem,
+  PaginationRenderItemParams,
+} from '@mui/material'
+import { IconSvg } from '../IconSvg'
+import { extendableComponent } from '../Styles'
+import { NextLink } from '../Theme'
+import { iconChevronLeft, iconChevronRight } from '../icons'
+
+export type PaginationExtendedProps = {
+  count: number
+  page: number
+  sx?: SxProps<Theme>
+  size?: 'small' | 'medium' | 'large'
+  paginationHref: (params: PaginationRenderItemParams) => string
+  siblingCount?: number
+  boundaryCount?: number
+} & Omit<PaginationProps, 'count' | 'url' | 'defaultPage' | 'page'>
+
+const parts = ['root', 'button', 'icon'] as const
+const { classes } = extendableComponent('Pagination', parts)
+
+function Prev() {
+  return <IconSvg src={iconChevronLeft} className={classes.icon} size='medium' />
+}
+function Next() {
+  return <IconSvg src={iconChevronRight} className={classes.icon} size='medium' />
+}
+
+/**
+ * Rel="prev" and rel="next" are deprecated by Google.
+ *
+ * Read more: https://ahrefs.com/blog/rel-prev-next-pagination/
+ */
+export function PaginationExtended(props: PaginationExtendedProps) {
+  const {
+    count,
+    page,
+    sx = [],
+    size,
+    paginationHref,
+    renderItem,
+    siblingCount,
+    boundaryCount,
+  } = props
+
+  return (
+    <Box
+      className={classes.root}
+      sx={[
+        (theme) => ({
+          margin: '0 auto',
+          marginTop: theme.spacings.lg,
+          marginBottom: theme.spacings.lg,
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          gap: '6px',
+          '& .Mui-disabled': {
+            background: 'none',
+          },
+          '& .MuiPagination-ul': {
+            justifyContent: 'center',
+          },
+          '& .MuiPaginationItem-root': {
+            minWidth: '35px',
+            height: '35px',
+            padding: 0,
+            '&.MuiPaginationItem-previousNext, &.MuiPaginationItem-ellipsis': {
+              margin: 0,
+            },
+          },
+        }),
+        ...(Array.isArray(sx) ? sx : [sx]),
+      ]}
+    >
+      <Pagination
+        count={count}
+        defaultPage={page}
+        page={page}
+        siblingCount={siblingCount ?? 1}
+        boundaryCount={boundaryCount ?? 1}
+        size={size ?? 'large'}
+        renderItem={
+          renderItem ??
+          ((item) => (
+            <PaginationItem
+              component={NextLink}
+              href={paginationHref(item)}
+              slots={{ previous: Prev, next: Next }}
+              {...item}
+            />
+          ))
+        }
+      />
+    </Box>
+  )
+}

package/Snackbar/MessageSnackbarImpl.tsx

@@ -9,9 +9,10 @@ import {
   SxProps,
   Theme,
   Portal,
+  SvgIconProps,
 } from '@mui/material'
 import React, { useEffect, useState } from 'react'
-import { IconSvg } from '../IconSvg'
+import { IconSvg, IconSvgProps } from '../IconSvg'
 import { extendableComponent, breakpointVal } from '../Styles'
 import { iconClose, iconCheckmark, iconSadFace } from '../icons'
 import iconInfo from '../icons/info.svg'
@@ -28,6 +29,8 @@ export type MessageSnackbarProps = Omit<
   children?: React.ReactNode
   onClose?: () => void
   sx?: SxProps<Theme>
+  disableClose?: boolean
+  icon?: IconSvgProps['src']
 } & OwnerState
 
 type OwnerState = {
@@ -39,6 +42,8 @@ type OwnerState = {
    * Setting this to true allows interaction with the rest of the page without closing the Snackbar
    */
   disableBackdropClick?: boolean
+  disableClose?: boolean
+  disableIcon?: boolean
 }
 
 const name = 'MessageSnackbarImpl' as const
@@ -62,10 +67,21 @@ export default function MessageSnackbarImpl(props: MessageSnackbarProps) {
     severity = 'info',
     sx,
     disableBackdropClick,
+    disableClose,
+    disableIcon,
+    icon,
     ...snackbarProps
   } = props
 
-  const classes = withState({ sticky, size, severity, variant })
+  const classes = withState({
+    sticky,
+    size,
+    severity,
+    variant,
+    disableBackdropClick,
+    disableClose,
+    disableIcon,
+  })
 
   useEffect(() => {
     setShowSnackbar(!!open)
@@ -89,9 +105,10 @@ export default function MessageSnackbarImpl(props: MessageSnackbarProps) {
     }
   }
 
-  let icon = iconCheckmark
-  if (severity === 'info') icon = iconInfo
-  if (severity === 'error') icon = iconSadFace
+  let icon2 = iconCheckmark
+  if (severity === 'info') icon2 = iconInfo
+  if (severity === 'error') icon2 = iconSadFace
+  if (icon) icon2 = icon
 
   return (
     <Portal>
@@ -148,10 +165,32 @@ export default function MessageSnackbarImpl(props: MessageSnackbarProps) {
                 gridArea: 'children',
               },
             },
+
+            '&.disableIcon .MuiSnackbarContent-message': {
+              gridTemplate: {
+                xs: `"children close"
+                       "action action"`,
+                md: '"children action close"',
+              },
+            },
+            '&.disableClose .MuiSnackbarContent-message': {
+              gridTemplate: {
+                xs: `"icon children"
+                       "action action"`,
+                md: '"icon children action"',
+              },
+            },
+            '&.disableIcon.disableClose .MuiSnackbarContent-message': {
+              gridTemplate: {
+                xs: `"children"
+                       "action"`,
+                md: '"children action"',
+              },
+            },
           })}
           message={
             <>
-              <IconSvg src={icon} size='large' />
+              {!disableIcon && <IconSvg src={icon2} size='large' />}
               <Box gridArea='children'>{children}</Box>
               {/* </Box> */}
               {action && (
@@ -159,19 +198,21 @@ export default function MessageSnackbarImpl(props: MessageSnackbarProps) {
                   {action}
                 </Box>
               )}
-              <Fab
-                className={classes.close}
-                aria-label={i18n._(/* i18n */ 'Close')}
-                size='small'
-                onClick={hideSnackbar}
-                onMouseDown={preventAnimationBubble}
-                onTouchStart={preventAnimationBubble}
-                sx={(theme) => ({
-                  backgroundColor: lighten(theme.palette.background.paper, 0.1),
-                })}
-              >
-                <IconSvg src={iconClose} />
-              </Fab>
+              {!disableClose && (
+                <Fab
+                  className={classes.close}
+                  aria-label={i18n._(/* i18n */ 'Close')}
+                  size='small'
+                  onClick={hideSnackbar}
+                  onMouseDown={preventAnimationBubble}
+                  onTouchStart={preventAnimationBubble}
+                  sx={(theme) => ({
+                    backgroundColor: lighten(theme.palette.background.paper, 0.1),
+                  })}
+                >
+                  <IconSvg src={iconClose} />
+                </Fab>
+              )}
             </>
           }
         />

package/Styles/responsiveVal.tsx

@@ -6,15 +6,14 @@
 export function responsiveVal(
   min: number,
   max: number,
-  maxBreakpoint = 1280,
-): `max(${number}px, min(${string}, ${number}px))` {
+  minBreakpoint = 320,
+  maxBreakpoint = 2560,
+): `clamp(${number}px, ${string}, ${number}px)` {
   const round = (x: number, n: number): number => Math.round(x * 10 ** n) / 10 ** n
 
-  const minBreakpoint = 320
   const growth = (max - min) / (maxBreakpoint - minBreakpoint)
   const base = round(min - growth * minBreakpoint, 2)
   const vsize = round(growth * 100, 2)
 
-  const calc = `(${base}px + ${vsize}vw)`
-  return `max(${min}px, min(${calc}, ${max}px))`
+  return `clamp(${min}px, (${base}px + ${vsize}vw), ${max}px)`
 }

package/Styles/withEmotionCache.tsx

@@ -1,10 +1,10 @@
 import type { EmotionJSX } from '@emotion/react/types/jsx-namespace'
 import createEmotionServer from '@emotion/server/create-instance'
-// eslint-disable-next-line @next/next/no-document-import-in-page
 import { AppType } from 'next/app'
+// eslint-disable-next-line @next/next/no-document-import-in-page
 import type NextDocument from 'next/document'
 // eslint-disable-next-line @next/next/no-document-import-in-page
-import type { DocumentContext, DocumentInitialProps } from 'next/document'
+import type { DocumentContext } from 'next/document'
 import { EmotionProviderProps } from './EmotionProvider'
 import { createEmotionCache } from './createEmotionCache'
 

package/Theme/DarkLightModeThemeProvider.tsx

@@ -14,6 +14,7 @@ import { useRouter } from 'next/router'
 import { createContext, useContext, useEffect, useMemo, useState } from 'react'
 import { IconSvg } from '../IconSvg'
 import { iconMoon, iconSun } from '../icons'
+import { getCssFlag, setCssFlag } from '../utils/cssFlags'
 
 type Mode = 'dark' | 'light'
 type UserMode = 'auto' | Mode
@@ -22,6 +23,7 @@ type ColorModeContext = {
   userMode: UserMode
   browserMode: Mode
   currentMode: Mode
+  isSingleMode: boolean
   toggle: () => void
 }
 
@@ -29,48 +31,59 @@ export const colorModeContext = createContext(undefined as unknown as ColorModeC
 colorModeContext.displayName = 'ColorModeContext'
 
 type ThemeProviderProps = {
-  // eslint-disable-next-line react/no-unused-prop-types
-  light: Theme
-  // eslint-disable-next-line react/no-unused-prop-types
-  dark: Theme
-
   children: React.ReactNode
-}
+  ssrMode?: Mode
+  listenToBrowser?: boolean
+} & (
+  | { light: Theme; dark?: undefined }
+  | { light?: undefined; dark: Theme }
+  | { light: Theme; dark: Theme }
+)
 
 /**
  * Wrapper around `import { ThemeProvider } from '@mui/material'`
  *
  * The multi DarkLightModeThemeProvider allows switching between light and dark mode based on URL
  * and on user input.
- *
- * If you _just_ wan't a single theme, use the import { ThemeProvider } from '@mui/material' instead.
  */
 export function DarkLightModeThemeProvider(props: ThemeProviderProps) {
-  const { children, light, dark } = props
+  const { children, light, dark, ssrMode = 'light', listenToBrowser = true } = props
+  const [configuredMode, setConfiguredMode] = useState<UserMode>(listenToBrowser ? 'auto' : ssrMode)
+  const setThemeMode = (mode: UserMode) => {
+    setConfiguredMode(mode)
+    setCssFlag('color-scheme', mode)
+  }
 
-  // todo: Save this in local storage
-  const [userMode, setUserMode] = useState<UserMode>('auto')
   const browserMode: Mode = useMediaQuery('(prefers-color-scheme: dark)') ? 'dark' : 'light'
 
   // If the user has set a mode, use that. Otherwise, use the browser mode.
-  const currentMode = userMode === 'auto' ? browserMode : userMode
-  const theme = currentMode === 'light' ? light : dark
+  const currentMode = configuredMode === 'auto' ? browserMode : configuredMode
+
+  let theme: Theme = light || dark // Default
+  if (light && currentMode === 'light') theme = light
+  else if (dark) theme = dark
+
+  useEffect(() => {
+    const flag = getCssFlag('color-scheme') as Mode
+    if (flag) setConfiguredMode(flag)
+  }, [setConfiguredMode])
 
   // If a URL parameter is present, switch from auto to light or dark mode
   const { asPath } = useRouter()
   useEffect(() => {
-    if (asPath.includes('darkmode')) setUserMode('dark')
+    if (asPath.includes('darkmode')) setConfiguredMode('dark')
   }, [asPath])
 
   // Create the context
   const colorContext: ColorModeContext = useMemo(
     () => ({
       browserMode,
-      userMode,
+      userMode: configuredMode,
       currentMode,
-      toggle: () => setUserMode(currentMode === 'light' ? 'dark' : 'light'),
+      isSingleMode: !light || !dark,
+      toggle: () => setThemeMode(currentMode === 'light' ? 'dark' : 'light'),
     }),
-    [browserMode, currentMode, userMode],
+    [browserMode, configuredMode, currentMode, light, dark],
   )
 
   return (
@@ -85,7 +98,12 @@ export function useColorMode() {
 }
 
 export function DarkLightModeToggleFab(props: Omit<FabProps, 'onClick'>) {
-  const { currentMode, toggle } = useColorMode()
+  const { currentMode, isSingleMode, toggle } = useColorMode()
+
+  if (isSingleMode) {
+    return null
+  }
+
   return (
     <Fab size='large' color='inherit' onClick={toggle} {...props}>
       <IconSvg src={currentMode === 'light' ? iconMoon : iconSun} size='large' />
@@ -100,7 +118,11 @@ export function DarkLightModeToggleFab(props: Omit<FabProps, 'onClick'>) {
  */
 export function DarkLightModeMenuSecondaryItem(props: ListItemButtonProps) {
   const { sx = [] } = props
-  const { currentMode, toggle } = useColorMode()
+  const { currentMode, isSingleMode, toggle } = useColorMode()
+
+  if (isSingleMode) {
+    return null
+  }
 
   return (
     <ListItemButton {...props} sx={[{}, ...(Array.isArray(sx) ? sx : [sx])]} dense onClick={toggle}>

package/Theme/MuiButton.ts

@@ -1,4 +1,4 @@
-import { ComponentsVariants, Theme } from '@mui/material'
+import { ComponentsVariants, Theme, alpha, darken, lighten } from '@mui/material'
 import { responsiveVal } from '../Styles/responsiveVal'
 
 declare module '@mui/material/Button/Button' {
@@ -126,7 +126,15 @@ export const MuiButtonPill: ButtonVariants = [
   },
   {
     props: { variant: 'pill', color: 'inherit' },
-    style: ({ theme }) => ({ backgroundColor: theme.palette.background.paper }),
+    style: ({ theme }) => ({
+      backgroundColor: theme.palette.background.paper,
+      '&:hover:not(.Mui-disabled)': {
+        backgroundColor:
+          theme.palette.mode === 'light'
+            ? darken(theme.palette.background.default, 0.05)
+            : lighten(theme.palette.background.default, 0.2),
+      },
+    }),
   },
   {
     props: { variant: 'pill', disabled: true },
@@ -142,7 +150,7 @@ export const MuiButtonInline: ButtonVariants = [
     props: { variant: 'inline', color: 'primary' },
     style: ({ theme }) => ({
       color: theme.palette.primary.main,
-      '&:hover:not(.Mui-disabled)': { backgroundColor: `${theme.palette.primary.main}30` },
+      '&:hover:not(.Mui-disabled)': { backgroundColor: alpha(theme.palette.primary.main, 0.19) },
     }),
   },
   {

package/TimeAgo/TimeAgo.tsx

@@ -8,6 +8,9 @@ export type TimeAgoProps = {
   locale?: string
 }
 
+/**
+ * @deprecated Use <RelativeToTimeFormat /> instead.
+ */
 export function TimeAgo(props: TimeAgoProps) {
   const { date } = props
   const msPerMinute = 60 * 1000

package/hooks/index.ts

@@ -5,5 +5,6 @@ export * from './useNumberFormat'
 export * from './useMemoObject'
 export * from './useStorefrontConfig'
 export * from './useUrlQuery'
-export * from './useSsr'
+export * from './useIsSsr'
 export * from './useLocale'
+export * from './memoDeep'

package/hooks/memoDeep.ts

@@ -0,0 +1,38 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { equal } from '@wry/equality'
+import { FunctionComponent, memo, NamedExoticComponent } from 'react'
+
+/**
+ * This is a deep comparison version of React's `memo` function.
+ *
+ * This method isn't too expensive to run, but will be rerun every time a parent component is rendered.
+ *
+ * This should probably only be used as the result of a performance profiling session.
+ */
+export function memoDeep<P extends object>(
+  Component: FunctionComponent<P>,
+  measure: boolean = false,
+): NamedExoticComponent<P> {
+  return memo(
+    Component,
+    process.env.NODE_ENV === 'development' && measure
+      ? (prevProps, nextProps) => {
+          const start = performance.now()
+          const result = equal(prevProps, nextProps)
+          const ms = performance.now() - start
+
+          if (ms < 0.2) return result
+
+          console.log(`memoDeep took more than 0.2ms`, {
+            result,
+            ms,
+            Component,
+            prevProps,
+            nextProps,
+          })
+
+          return result
+        }
+      : equal,
+  )
+}

package/hooks/useDateTimeFormat.ts

@@ -1,11 +1,11 @@
 import { useMemo } from 'react'
 import { useLocale } from './useLocale'
 
-export type DateTimeFormatProps = Intl.DateTimeFormatOptions
-
-export function useDateTimeFormat(props?: DateTimeFormatProps) {
+/**
+ * @deprecated use <DateFormat/>, <TimeFormat/> or <DateTimeFormat/> instead
+ */
+export function useDateTimeFormat(props?: Intl.DateTimeFormatOptions) {
   const locale = useLocale()
-
   const formatter = useMemo(() => new Intl.DateTimeFormat(locale, props), [locale, props])
   return formatter
 }

package/hooks/{useSsr.ts → useIsSsr.ts}

@@ -2,6 +2,9 @@ import { useSyncExternalStore } from 'react'
 
 const emptySubscribe = () => () => {}
 
+/**
+ * This method will return true on the server and during hydration and false after that.
+ */
 export function useIsSSR() {
   return useSyncExternalStore(
     emptySubscribe,