@graphcommerce/next-ui 5.2.0-canary.9 → 6.0.0-canary.20

package/Blog/BlogAuthor/BlogAuthor.tsx

@@ -15,11 +15,11 @@ export function BlogAuthor(props: BlogAuthorProps) {
 
   return (
     <Box
+      maxWidth='md'
       sx={[
         {
           display: 'flex',
           justifyContent: 'left',
-          maxWidth: 800,
           margin: `0 auto`,
           marginBottom: (theme) => theme.spacings.md,
         },

package/Blog/BlogContent/BlogContent.tsx

@@ -1,7 +1,25 @@
-import { styled } from '@mui/material'
+import { Box, SxProps, Theme } from '@mui/material'
 
-export const BlogContent = styled('div')(({ theme }) => ({
-  maxWidth: 800,
-  margin: '0 auto',
-  marginBottom: theme.spacings.sm,
-}))
+type BlogContentProps = {
+  children: React.ReactNode
+  sx?: SxProps<Theme>
+}
+
+export function BlogContent(props: BlogContentProps) {
+  const { children, sx = [] } = props
+
+  return (
+    <Box
+      maxWidth='md'
+      sx={[
+        (theme) => ({
+          margin: '0 auto',
+          marginBottom: theme.spacings.sm,
+        }),
+        ...(Array.isArray(sx) ? sx : [sx]),
+      ]}
+    >
+      {children}
+    </Box>
+  )
+}

package/Blog/BlogHeader/BlogHeader.tsx

@@ -18,12 +18,13 @@ export function BlogHeader(props: BlogHeaderProps) {
   return (
     <Box
       className={classes.header}
+      maxWidth='md'
       sx={[
         (theme) => ({
-          maxWidth: 800,
           margin: `0 auto`,
           marginBottom: theme.spacings.md,
           '& img': {
+            objectFit: 'cover',
             ...breakpointVal(
               'borderRadius',
               theme.shape.borderRadius * 2,

package/Blog/BlogList/BlogList.tsx

@@ -1,9 +1,26 @@
-import { styled } from '@mui/material'
+import { SxProps, Theme } from '@mui/material'
 import { Row } from '../../Row/Row'
-import { responsiveVal } from '../../Styles/responsiveVal'
 
-export const BlogItemGrid = styled(Row, { name: 'BlogList' })(({ theme }) => ({
-  display: 'grid',
-  gap: theme.spacings.md,
-  gridTemplateColumns: `repeat(auto-fill, minmax(${responsiveVal(150, 285)}, 1fr))`,
-}))
+type BlogItemGridProps = {
+  children: React.ReactNode
+  sx?: SxProps<Theme>
+}
+
+export function BlogItemGrid(props: BlogItemGridProps) {
+  const { children, sx = [] } = props
+
+  return (
+    <Row
+      sx={[
+        (theme) => ({
+          display: 'grid',
+          gap: theme.spacings.md,
+          gridTemplateColumns: { xs: `repeat(2, 1fr)`, md: `repeat(3, 1fr)`, lg: `repeat(4, 1fr)` },
+        }),
+        ...(Array.isArray(sx) ? sx : [sx]),
+      ]}
+    >
+      {children}
+    </Row>
+  )
+}

package/Blog/BlogListItem/BlogListItem.tsx

@@ -28,7 +28,7 @@ export function BlogListItem(props: BlogListItemProps) {
       sx={[
         (theme) => ({
           display: 'grid',
-          gridTemplateRows: `${responsiveVal(140, 220)} auto auto`,
+          gridTemplateRows: `auto auto auto`,
           alignContent: 'start',
           color: theme.palette.text.primary,
           gap: theme.spacings.xxs,
@@ -41,26 +41,16 @@ export function BlogListItem(props: BlogListItemProps) {
         <Box
           className={classes.asset}
           sx={(theme) => ({
-            display: 'grid',
-            alignContent: 'center',
-            overflow: 'hidden',
-            height: '100%',
-            width: '100%',
-            ...breakpointVal(
-              'borderRadius',
-              theme.shape.borderRadius * 2,
-              theme.shape.borderRadius * 3,
-              theme.breakpoints.values,
-            ),
             '& img': {
-              height: '100% !important',
+              aspectRatio: '3/2',
               objectFit: 'cover',
+              ...breakpointVal(
+                'borderRadius',
+                theme.shape.borderRadius * 2,
+                theme.shape.borderRadius * 3,
+                theme.breakpoints.values,
+              ),
             },
-            '& p': {
-              alignSelf: 'center',
-              justifySelf: 'center',
-            },
-            background: theme.palette.background.paper,
           })}
         >
           {asset}

package/Blog/BlogTags/BlogTags.tsx

@@ -1,7 +1,7 @@
 import { styled } from '@mui/material'
 
 export const BlogTags = styled('div')(({ theme }) => ({
-  maxWidth: 800,
+  maxWidth: theme.breakpoints.values.md,
   margin: `0 auto`,
   marginBottom: theme.spacings.sm,
 }))

package/Blog/BlogTitle/BlogTitle.tsx

@@ -8,7 +8,12 @@ export function BlogTitle(props: BlogTitleProps) {
   const { sx = [], children } = props
 
   return (
-    <Box sx={[{ maxWidth: 800, margin: '0 auto' }, ...(Array.isArray(sx) ? sx : [sx])]}>
+    <Box
+      sx={[
+        (theme) => ({ maxWidth: theme.breakpoints.values.md, margin: '0 auto' }),
+        ...(Array.isArray(sx) ? sx : [sx]),
+      ]}
+    >
       <LayoutTitle variant='h1'>{children}</LayoutTitle>
     </Box>
   )

package/Button/Button.tsx

@@ -3,7 +3,7 @@ import { LoadingButton as Button, LoadingButtonProps, LoadingButtonTypeMap } fro
 
 export type ButtonProps<
   D extends React.ElementType = LoadingButtonTypeMap['defaultComponent'],
-  P = {},
+  P = object,
 > = LoadingButtonProps<D, P>
 
 export { Button }

package/CHANGELOG.md

@@ -1,5 +1,43 @@
 # Change Log
 
+## 6.0.0-canary.20
+
+## 5.2.0-canary.19
+
+## 5.2.0-canary.18
+
+## 5.2.0-canary.17
+
+## 5.2.0-canary.16
+
+## 5.2.0-canary.15
+
+### Minor Changes
+
+- [#1798](https://github.com/graphcommerce-org/graphcommerce/pull/1798) [`3cee17a51`](https://github.com/graphcommerce-org/graphcommerce/commit/3cee17a51ff961f4363d95c9decb8c7d1f9ca319) - Added filterByTypename function to filter types based on \_\_typename ([@mikekeehnen](https://github.com/mikekeehnen))
+
+## 5.2.0-canary.14
+
+## 5.2.0-canary.13
+
+### Minor Changes
+
+- [#1795](https://github.com/graphcommerce-org/graphcommerce/pull/1795) [`236d698b2`](https://github.com/graphcommerce-org/graphcommerce/commit/236d698b2aac55598fc45a6a58574a538f23e160) - Navigation link fix, homepage and category style fixes ([@ErwinOtten](https://github.com/ErwinOtten))
+
+## 5.2.0-canary.12
+
+## 5.2.0-canary.11
+
+### Patch Changes
+
+- [#1794](https://github.com/graphcommerce-org/graphcommerce/pull/1794) [`29e15cf63`](https://github.com/graphcommerce-org/graphcommerce/commit/29e15cf63251cf98cf42325322fcf09fb7a6c0b7) - Fix scroll issue with bottom overlay on Android ([@bramvanderholst](https://github.com/bramvanderholst))
+
+## 5.2.0-canary.10
+
+### Minor Changes
+
+- [#1793](https://github.com/graphcommerce-org/graphcommerce/pull/1793) [`5562fa69b`](https://github.com/graphcommerce-org/graphcommerce/commit/5562fa69b1bc260f68555dcfaf30153eda489bed) - Add newsletter subscribe form ([@ErwinOtten](https://github.com/ErwinOtten))
+
 ## 5.2.0-canary.9
 
 ### Patch Changes

package/FramerScroller/SidebarGallery.tsx

@@ -288,8 +288,8 @@ export function SidebarGallery(props: SidebarGalleryProps) {
             <Box
               className={classes.bottomCenter}
               sx={{
-                display: 'grid',
-                gridAutoFlow: 'column',
+                display: 'flex',
+                px: theme.page.horizontal,
                 gap: theme.spacings.xxs,
                 position: 'absolute',
                 bottom: theme.spacings.xxs,

package/JsonLd/safeJsonLdReplacer.ts

@@ -13,6 +13,7 @@ const ESCAPE_REGEX = new RegExp(`[${Object.keys(ESCAPE_ENTITIES).join('')}]`, 'g
 const ESCAPE_REPLACER = (t: string): string => ESCAPE_ENTITIES[t as keyof typeof ESCAPE_ENTITIES]
 
 // Utility: Assert never
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
 function isNever(_: never): void {}
 
 /**

package/Layout/components/LayoutProvider.tsx

@@ -7,7 +7,7 @@ export type LayoutProviderProps = {
 } & LayoutContext
 
 export function LayoutProvider(props: LayoutProviderProps) {
-  const { children, scroll: scroll } = props
+  const { children, scroll } = props
 
   return (
     <layoutContext.Provider value={useMemo(() => ({ scroll }), [scroll])}>

package/Navigation/components/NavigationItem.tsx

@@ -1,9 +1,10 @@
 /* eslint-disable @typescript-eslint/no-use-before-define */
 import { useMotionValueValue } from '@graphcommerce/framer-utils'
-import { alpha, Box, ListItemButton, styled, useEventCallback, useTheme } from '@mui/material'
+import { alpha, Box, ListItemButton, styled, useEventCallback } from '@mui/material'
 import React from 'react'
 import { IconSvg } from '../../IconSvg'
 import { extendableComponent } from '../../Styles/extendableComponent'
+import { NextLink } from '../../Theme'
 import { useMatchMedia } from '../../hooks'
 import { iconChevronRight } from '../../icons'
 import {
@@ -14,8 +15,6 @@ import {
   useNavigation,
 } from '../hooks/useNavigation'
 import type { NavigationList } from './NavigationList'
-import { NextLink } from '../../Theme'
-import { useRouter } from 'next/router'
 
 type OwnerState = {
   first?: boolean
@@ -49,8 +48,6 @@ const NavigationLI = styled('li')({ display: 'contents' })
 export const NavigationItem = React.memo<NavigationItemProps>((props) => {
   const { id, parentPath, idx, first, last, NavigationList, mouseEvent } = props
   const { selection, hideRootOnNavigate, closing, animating, serverRenderDepth } = useNavigation()
-  const router = useRouter()
-  const { locale } = router
 
   const row = idx + 1
 
@@ -83,14 +80,13 @@ export const NavigationItem = React.memo<NavigationItemProps>((props) => {
 
   if (isNavigationButton(props)) {
     const { childItems, name, href } = props
-    const prefix = locale === router.defaultLocale ? '' : `/${locale}`
     const skipChildren = itemPath.length + 1 > serverRenderDepth && !isSelected && !!href
 
     return (
       <NavigationLI className={classes.li}>
         <ListItemButton
-          component={href ? 'a' : 'div'}
-          href={href ? prefix + href : undefined}
+          component={NextLink}
+          href={href}
           className={classes.item}
           role='button'
           sx={[

package/Navigation/hooks/useNavigation.ts

@@ -1,5 +1,5 @@
 import { MotionValue, useMotionValue } from 'framer-motion'
-import React, { createContext, MutableRefObject, useContext } from 'react'
+import React, { createContext, useContext } from 'react'
 
 export type NavigationId = string | number
 export type NavigationPath = NavigationId[]

package/Overlay/components/OverlayBase.tsx

@@ -2,7 +2,7 @@ import { Scroller, useScrollerContext, useScrollTo } from '@graphcommerce/framer
 import { dvh, dvw, useIsomorphicLayoutEffect } from '@graphcommerce/framer-utils'
 import { Box, styled, SxProps, Theme, useTheme, useThemeProps } from '@mui/material'
 import { m, MotionProps, useDomEvent, useMotionValue, useTransform } from 'framer-motion'
-import React, { useCallback, useContext, useEffect, useMemo, useRef } from 'react'
+import React, { useCallback, useEffect, useRef } from 'react'
 import { LayoutProvider } from '../../Layout/components/LayoutProvider'
 import { ExtendableComponent, extendableComponent } from '../../Styles'
 import { useOverlayPosition } from '../hooks/useOverlayPosition'
@@ -287,7 +287,18 @@ export function OverlayBase(incomingProps: LayoutOverlayBaseProps) {
                 borderTopLeftRadius: theme.shape.borderRadius * 3,
                 borderTopRightRadius: theme.shape.borderRadius * 3,
                 gridTemplate: `"beforeOverlay" "overlay"`,
-                height: dvh(100),
+                height: `calc(${dvh(100)} - 1px)`,
+
+                '&::after': {
+                  content: `""`,
+                  display: 'block',
+                  position: 'absolute',
+                  width: '100%',
+                  height: '1px',
+                  top: 'calc(100% - 1px)',
+                  left: '0',
+                  background: theme.palette.background.paper,
+                },
               },
             },
             [theme.breakpoints.up('md')]: {

package/Overlay/hooks/useOverlayPosition.ts

@@ -1,9 +1,5 @@
 import { useScrollerContext } from '@graphcommerce/framer-scroller'
-import {
-  useConstant,
-  useElementScroll,
-  useIsomorphicLayoutEffect,
-} from '@graphcommerce/framer-utils'
+import { useConstant, useIsomorphicLayoutEffect } from '@graphcommerce/framer-utils'
 import { motionValue } from 'framer-motion'
 import { useCallback, useEffect } from 'react'
 import { useMatchMedia } from '../../hooks'

package/OverlayOrPopperChip/OverlayOrPopperChip.tsx

@@ -4,7 +4,6 @@ import { IconSvg } from '../IconSvg'
 import { responsiveVal } from '../Styles'
 import { iconChevronDown, iconChevronUp } from '../icons'
 import { OverlayOrPopperPanel, OverlayOrPopperPanelProps } from './OverlayOrPopperPanel'
-import { PanelProps } from './types'
 
 function isMulti(
   selectedLabel: React.ReactNode | React.ReactNode[],

package/OverlayOrPopperChip/PopperPanel.tsx

@@ -1,5 +1,4 @@
 import { ClickAwayListener, Popper, PopperProps } from '@mui/material'
-import { m } from 'framer-motion'
 import { useRef } from 'react'
 import { PopperPanelActions } from './PopperPanelActions'
 import { PanelProps } from './types'

package/PageMeta/PageMeta.tsx

@@ -5,6 +5,7 @@ import { getDomainLocale } from 'next/dist/client/get-domain-locale'
 import { NextRouter, resolveHref } from 'next/dist/shared/lib/router/router'
 import Head from 'next/head'
 import { useRouter } from 'next/router'
+import type {} from '@graphcommerce/next-config'
 
 // https://developers.google.com/search/docs/advanced/robots/robots_meta_tag#directives
 export type MetaRobots =
@@ -48,12 +49,6 @@ export function canonicalize(router: PartialNextRouter, incoming?: Canonical) {
   }
 
   if (canonical.startsWith('/')) {
-    if (!process.env.NEXT_PUBLIC_SITE_URL) {
-      if (process.env.NODE_ENV !== 'production') {
-        throw Error('NEXT_PUBLIC_SITE_URL is not defined in .env')
-      }
-    }
-
     let [href, as = href] = resolveHref(router as NextRouter, canonical, true)
 
     const curLocale = router.locale
@@ -65,10 +60,8 @@ export function canonicalize(router: PartialNextRouter, incoming?: Canonical) {
 
     href = localeDomain || addBasePath(addLocale(as, curLocale, router.defaultLocale))
 
-    let siteUrl = process.env.NEXT_PUBLIC_SITE_URL
-    if (siteUrl && siteUrl.endsWith('/')) {
-      siteUrl = siteUrl.slice(0, -1)
-    }
+    let siteUrl = import.meta.graphCommerce.canonicalBaseUrl
+    if (siteUrl.endsWith('/')) siteUrl = siteUrl.slice(0, -1)
 
     canonical = `${siteUrl}${href}`
   }

package/RenderType/RenderType.tsx

@@ -52,3 +52,13 @@ export function isTypename<T extends TypeObject, Typenames extends T['__typename
 ): type is FilterTypeByTypename<T, Typenames[number]> {
   return typename.includes(type.__typename)
 }
+
+export function filterByTypename<T extends TypeObject, Typename extends T['__typename']>(
+  type: (T | undefined | null)[] | undefined | null,
+  typename: Typename,
+): FilterTypeByTypename<T, Typename>[] | undefined {
+  return type?.filter((item) => item?.__typename === typename) as FilterTypeByTypename<
+    T,
+    Typename
+  >[]
+}

package/Row/ButtonLinkList/ButtonLinkListItem.tsx

@@ -10,11 +10,17 @@ export type ButtonLinkListItemProps = {
 } & Omit<ListItemButtonProps<typeof NextLink>, 'href'>
 
 export function ButtonLinkListItem(props: ButtonLinkListItemProps) {
-  const { children, endIcon = <IconSvg src={iconChevronRight} />, ...listItemButtonProps } = props
+  const {
+    children,
+    url,
+    endIcon = <IconSvg src={iconChevronRight} />,
+    ...listItemButtonProps
+  } = props
 
   return (
     <ListItemButton
       component={NextLink}
+      href={url}
       sx={(theme) => ({
         padding: `${theme.spacings.xxs} 0`,
         borderBottom: `1px solid ${theme.palette.divider}`,

package/Snackbar/MessageSnackbarImpl.tsx

@@ -65,7 +65,7 @@ export default function MessageSnackbarImpl(props: MessageSnackbarProps) {
     setShowSnackbar(!!open)
   }, [open])
 
-  const hideSnackbar = (e) => {
+  const hideSnackbar = () => {
     setShowSnackbar(false)
     onClose?.()
   }

package/Theme/themeDefaults.ts

@@ -1,4 +1,3 @@
-import { SxProps, Theme } from '@mui/material'
 import { Shadows } from '@mui/material/styles/shadows'
 import { spreadVal } from '../Styles/spreadVal'
 import { breakpoints } from './breakpoints'

package/ToggleButtonGroup/ToggleButtonGroup.tsx

@@ -103,12 +103,16 @@ const ToggleButtonGroup = React.forwardRef<HTMLDivElement, ToggleButtonGroupProp
         }
 
         return React.cloneElement(child, {
+          // @ts-expect-error TODO: fix TS error
           className: `${classes.button} ${child.props.className ?? ''}`,
           onChange: exclusive ? handleExclusiveChange : handleChange,
           selected:
+            // @ts-expect-error TODO: fix TS error
             child.props.selected === undefined
-              ? isValueSelected(child.props.value as string, value as string | string[])
-              : child.props.selected,
+              ? // @ts-expect-error TODO: fix TS error
+                isValueSelected(child.props.value as string, value as string | string[])
+              : // @ts-expect-error TODO: fix TS error
+                child.props.selected,
         })
       })}
     </Box>

package/hooks/index.ts

@@ -1,5 +1,6 @@
 export * from './useDateTimeFormat'
+export * from './useI18nConfig'
+export * from './useMatchMedia'
+export * from './useMemoDeep'
 export * from './useNumberFormat'
 export * from './useUrlQuery'
-export * from './useMemoDeep'
-export * from './useMatchMedia'

package/hooks/useI18nConfig.ts

@@ -0,0 +1,17 @@
+import type {} from '@graphcommerce/next-config'
+import { useRouter } from 'next/router'
+
+export const i18nAll = import.meta.graphCommerce.i18n
+
+/** Get the current i18n config based on the provided locale */
+export const i18nConfig = (locale?: string | undefined) => i18nAll.find((l) => l.locale === locale)
+
+export const i18nConfigDefault = () => i18nAll.find((l) => l.defaultLocale) ?? i18nAll[0]
+
+/** Automatically selects the correct i18n config based on the current locale */
+export function useI18nConfig(locale?: string | undefined) {
+  const routerLocale = useRouter().locale
+  const config = i18nConfig(locale ?? routerLocale)
+  if (!config) throw Error(`No i18n config found for locale ${locale}`)
+  return config
+}

package/hooks/useMemoDeep.ts

@@ -1,3 +1,4 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
 import { equal } from '@wry/equality'
 import { DependencyList, useMemo, useRef } from 'react'
 

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/next-ui",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "5.2.0-canary.9",
+  "version": "6.0.0-canary.20",
   "author": "",
   "license": "MIT",
   "sideEffects": false,
@@ -18,25 +18,25 @@
     "@emotion/react": "^11.10.5",
     "@emotion/server": "^11.4.0",
     "@emotion/styled": "^11.10.5",
-    "@graphcommerce/framer-next-pages": "5.2.0-canary.9",
-    "@graphcommerce/framer-scroller": "5.2.0-canary.9",
-    "@graphcommerce/framer-utils": "5.2.0-canary.9",
-    "@graphcommerce/image": "5.2.0-canary.9",
+    "@graphcommerce/framer-next-pages": "6.0.0-canary.20",
+    "@graphcommerce/framer-scroller": "6.0.0-canary.20",
+    "@graphcommerce/framer-utils": "6.0.0-canary.20",
+    "@graphcommerce/image": "6.0.0-canary.20",
     "cookie": "^0.5.0",
     "react-is": "^18.2.0",
     "schema-dts": "^1.1.0"
   },
   "devDependencies": {
-    "@graphcommerce/eslint-config-pwa": "5.2.0-canary.9",
-    "@graphcommerce/prettier-config-pwa": "5.2.0-canary.9",
-    "@graphcommerce/typescript-config-pwa": "5.2.0-canary.9",
+    "@graphcommerce/eslint-config-pwa": "6.0.0-canary.20",
+    "@graphcommerce/prettier-config-pwa": "6.0.0-canary.20",
+    "@graphcommerce/typescript-config-pwa": "6.0.0-canary.20",
     "@types/cookie": "^0.5.1",
     "@types/react-is": "^17.0.3",
     "typescript": "4.9.4"
   },
   "peerDependencies": {
-    "@lingui/core": "^3.13.2",
     "@lingui/react": "^3.13.2",
+    "@lingui/core": "^3.13.2",
     "@mui/lab": "^5.0.0-alpha.68",
     "@mui/material": "^5.10.16",
     "framer-motion": "^7.0.0",