@graphcommerce/next-ui 8.1.0-canary.9 → 9.0.0-canary.55

package/CHANGELOG.md

@@ -1,5 +1,167 @@
 # Change Log
 
+## 9.0.0-canary.55
+
+## 9.0.0-canary.54
+
+## 8.1.0-canary.53
+
+## 8.1.0-canary.52
+
+## 8.1.0-canary.51
+
+## 8.1.0-canary.50
+
+### Patch Changes
+
+- [#2321](https://github.com/graphcommerce-org/graphcommerce/pull/2321) [`fa261d4`](https://github.com/graphcommerce-org/graphcommerce/commit/fa261d4ae600b46ae08c5ca7514163f2da54eead) - Add the possibility to place content before or after the scroller.
+  ([@carlocarels90](https://github.com/carlocarels90))
+
+## 8.1.0-canary.49
+
+### Patch Changes
+
+- [#2317](https://github.com/graphcommerce-org/graphcommerce/pull/2317) [`6c173c7`](https://github.com/graphcommerce-org/graphcommerce/commit/6c173c7bba601413cc5e1c9cf0595b8ec262fb92) - Added new plugin insertion points: `<DocumentHeadStart/>`, `<DocumentHeadEnd/>`, `<DocumentBodyEnd/>`, `<DocumentBodyStart/>` for the \_document.app to allow creating plugins for those locations to insert scripts etc.
+  ([@paales](https://github.com/paales))
+
+## 8.1.0-canary.48
+
+## 8.1.0-canary.47
+
+### Minor Changes
+
+- [#2315](https://github.com/graphcommerce-org/graphcommerce/pull/2315) [`fb9118e`](https://github.com/graphcommerce-org/graphcommerce/commit/fb9118ec819d1b507d4fbde04f2ca34ec01ecf49) - Add guestOrder functionality, remove `size: 'max'` from getStaticProps
+  ([@Giovanni-Schroevers](https://github.com/Giovanni-Schroevers))
+
+## 8.1.0-canary.46
+
+### Patch Changes
+
+- [#2314](https://github.com/graphcommerce-org/graphcommerce/pull/2314) [`59874b5`](https://github.com/graphcommerce-org/graphcommerce/commit/59874b572bda17905dc836554f9a3e31f393eb3e) - Solve issue where the page would reload during development when the first call to /graphql was made.
+  ([@paales](https://github.com/paales))
+
+## 8.1.0-canary.45
+
+### Patch Changes
+
+- [#2216](https://github.com/graphcommerce-org/graphcommerce/pull/2216) [`1895176`](https://github.com/graphcommerce-org/graphcommerce/commit/1895176b5776adcf588999ceab7edd6f53cff294) - USPS would be loaded after other pages, causing uneceesasry slowdown
+  ([@paales](https://github.com/paales))
+
+- [#2216](https://github.com/graphcommerce-org/graphcommerce/pull/2216) [`74eb239`](https://github.com/graphcommerce-org/graphcommerce/commit/74eb2393a64988649178d59f53b33d41fecdd769) - Added Intl components and replaced usage sites
+  ([@paales](https://github.com/paales))
+
+- [#2216](https://github.com/graphcommerce-org/graphcommerce/pull/2216) [`012b865`](https://github.com/graphcommerce-org/graphcommerce/commit/012b86560d93e35dd7ca4a9469ed65e6fb83ead0) - Move arguments of responsiveVal around so the minBreakpoint can be given as third argument
+  ([@paales](https://github.com/paales))
+
+- [#2216](https://github.com/graphcommerce-org/graphcommerce/pull/2216) [`223f16a`](https://github.com/graphcommerce-org/graphcommerce/commit/223f16a0e9a7718e52e81a4e2902471a8b78d35c) - LazyHydrate component now accepts a height prop that allows deferring of rendering of the child component when initially rendered on the client. This improves performance.
+  ([@paales](https://github.com/paales))
+
+## 8.1.0-canary.44
+
+## 8.1.0-canary.43
+
+## 8.1.0-canary.42
+
+## 8.1.0-canary.41
+
+### Patch Changes
+
+- [#2242](https://github.com/graphcommerce-org/graphcommerce/pull/2242) [`a4cce76`](https://github.com/graphcommerce-org/graphcommerce/commit/a4cce76ca37af2bec604e953ada4bb11bd91f55d) - Add option to show an extended version of the pagination component. Configurable via the "productListPaginationVariant" key in your graphcommerce.config.js
+  COMPACT means: "< Page X of Y >"
+  EXTENDED means: "< 1 2 ... [5] ... 10 11 >" ([@FrankHarland](https://github.com/FrankHarland))
+
+## 8.1.0-canary.40
+
+### Minor Changes
+
+- [#2306](https://github.com/graphcommerce-org/graphcommerce/pull/2306) [`5e188e8`](https://github.com/graphcommerce-org/graphcommerce/commit/5e188e830dca4730c73830858f59a94e9d41ed12) - Add delete account functionality to the account section. Disabled by default and can be enabled through the config.
+  ([@Giovanni-Schroevers](https://github.com/Giovanni-Schroevers))
+
+## 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
+
+## 8.1.0-canary.34
+
+## 8.1.0-canary.33
+
+## 8.1.0-canary.32
+
+## 8.1.0-canary.31
+
+### Patch Changes
+
+- [#2297](https://github.com/graphcommerce-org/graphcommerce/pull/2297) [`e41cb6f`](https://github.com/graphcommerce-org/graphcommerce/commit/e41cb6fcdde95629d29c03b1a700c6097f00c901) - Prevent gallery thunbnails from scrolling when opening or closing a layout overlay
+  ([@Giovanni-Schroevers](https://github.com/Giovanni-Schroevers))
+
+## 8.1.0-canary.30
+
+## 8.1.0-canary.29
+
+## 8.1.0-canary.28
+
+## 8.1.0-canary.27
+
+### Minor Changes
+
+- [#2273](https://github.com/graphcommerce-org/graphcommerce/pull/2273) [`77955c5`](https://github.com/graphcommerce-org/graphcommerce/commit/77955c56ac8633ab1c5e0f3ddb25e3a87236e2bb) - Improve Breadcrumbs on Category and Product pages
+  ([@Jessevdpoel](https://github.com/Jessevdpoel))
+
+## 8.1.0-canary.26
+
+### Minor Changes
+
+- [#2274](https://github.com/graphcommerce-org/graphcommerce/pull/2274) [`4a24813`](https://github.com/graphcommerce-org/graphcommerce/commit/4a248130041484833768fe6018f91d05a59522de) - Add props to DarkLightModeThemeProvider to disable dark/light mode or to change the default ssr mode. Save user chosen mode in localStorage
+  ([@Giovanni-Schroevers](https://github.com/Giovanni-Schroevers))
+
+### Patch Changes
+
+- [#2274](https://github.com/graphcommerce-org/graphcommerce/pull/2274) [`57131cf`](https://github.com/graphcommerce-org/graphcommerce/commit/57131cfcc43695cc3e22f28912feb2a8439620a7) - Created a cssFlags functionality to allow for conditional rendering based on stored flags in the localStorage
+  ([@Giovanni-Schroevers](https://github.com/Giovanni-Schroevers))
+
+## 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
+
+### Minor Changes
+
+- [#2209](https://github.com/graphcommerce-org/graphcommerce/pull/2209) [`2872cab`](https://github.com/graphcommerce-org/graphcommerce/commit/2872cabdca9ee4f0378fd411c6a633f71bb92f1f) - Removed useMediaQuery from the wishlist and cart ItemActionCard and replaced it with a new responsive size prop.
+  ([@Jessevdpoel](https://github.com/Jessevdpoel))
+
+## 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
 
 ### Patch Changes

package/Config.graphqls

@@ -3,6 +3,11 @@ extend input GraphCommerceConfig {
   Configuration for the SidebarGallery component
   """
   sidebarGallery: SidebarGalleryConfig
+
+  """
+  Configuration for the SidebarGallery component
+  """
+  breadcrumbs: Boolean = false
 }
 
 """

package/Document/DocumentBodyEnd.tsx

@@ -0,0 +1,7 @@
+// eslint-disable-next-line @next/next/no-document-import-in-page
+import { DocumentProps } from 'next/document'
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export function DocumentBodyEnd(props: DocumentProps) {
+  return null
+}

package/Document/DocumentBodyStart.tsx

@@ -0,0 +1,7 @@
+// eslint-disable-next-line @next/next/no-document-import-in-page
+import { DocumentProps } from 'next/document'
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export function DocumentBodyStart(props: DocumentProps) {
+  return null
+}

package/Document/DocumentHeadEnd.tsx

@@ -0,0 +1,7 @@
+// eslint-disable-next-line @next/next/no-document-import-in-page
+import { DocumentProps } from 'next/document'
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export function DocumentHeadEnd(props: DocumentProps) {
+  return null
+}

package/Document/DocumentHeadStart.tsx

@@ -0,0 +1,7 @@
+// eslint-disable-next-line @next/next/no-document-import-in-page
+import { DocumentProps } from 'next/document'
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export function DocumentHeadStart(props: DocumentProps) {
+  return null
+}

package/Document/index.ts

@@ -0,0 +1,4 @@
+export * from './DocumentBodyEnd'
+export * from './DocumentBodyStart'
+export * from './DocumentHeadEnd'
+export * from './DocumentHeadStart'

package/Footer/Footer.tsx

@@ -31,7 +31,7 @@ export function Footer(props: FooterProps) {
   } = props
 
   return (
-    <LazyHydrate>
+    <LazyHydrate height={300}>
       <Container
         sx={[
           (theme) => ({

package/FramerScroller/SidebarGallery.tsx

@@ -31,7 +31,14 @@ import { iconChevronLeft, iconChevronRight, iconFullscreen, iconFullscreenExit }
 
 const MotionBox = styled(m.div)({})
 
-type OwnerState = { zoomed: boolean; disableZoom: boolean }
+type SidebarGalleryVariant = 'default' | 'oneColumn'
+
+type OwnerState = {
+  zoomed: boolean
+  disableZoom: boolean
+  sticky: boolean
+  variantMd: SidebarGalleryVariant
+}
 const name = 'SidebarGallery' as const
 const parts = [
   'row',
@@ -60,6 +67,10 @@ export type SidebarGalleryProps = {
   routeHash?: string
   sx?: SxProps<Theme>
   disableZoom?: boolean
+  disableSticky?: boolean
+  variantMd?: SidebarGalleryVariant
+  beforeScroller?: React.ReactNode
+  afterScroller?: React.ReactNode
 } & Pick<ScrollerButtonProps, 'showButtons'>
 
 export function SidebarGallery(props: SidebarGalleryProps) {
@@ -71,6 +82,10 @@ export function SidebarGallery(props: SidebarGalleryProps) {
     routeHash = 'gallery',
     showButtons,
     disableZoom = false,
+    disableSticky = false,
+    variantMd = 'default',
+    beforeScroller,
+    afterScroller,
   } = props
 
   const router = useRouter()
@@ -103,7 +118,7 @@ export function SidebarGallery(props: SidebarGalleryProps) {
     }
   }
 
-  const classes = withState({ zoomed, disableZoom })
+  const classes = withState({ zoomed, disableZoom, sticky: !disableSticky, variantMd })
   const theme = useTheme()
   const windowRef = useRef(typeof window !== 'undefined' ? window : null)
 
@@ -144,25 +159,31 @@ export function SidebarGallery(props: SidebarGalleryProps) {
               display: 'grid',
               gridTemplate: '"left" "right"',
               [theme.breakpoints.up('md')]: {
-                gridTemplate: `"left right" / 1fr calc(${responsiveVal(300, 500, theme.breakpoints.values.lg)} + ${
-                  theme.page.horizontal
-                } * 2)`,
+                '&:not(.variantMdOneColumn)': {
+                  gridTemplate: `"left right" / 1fr calc(${responsiveVal(300, 500, undefined, theme.breakpoints.values.lg)} + ${
+                    theme.page.horizontal
+                  } * 2)`,
+                },
               },
               background:
                 theme.palette.mode === 'light'
                   ? theme.palette.background.image
                   : theme.palette.background.paper,
-              paddingRight: `calc((100% - ${theme.breakpoints.values.lg}px) / 2)`,
-            },
-            zoomed && {
-              position: 'relative',
-              zIndex: theme.zIndex.modal,
-              marginTop: `calc(${theme.appShell.headerHeightSm} * -1)`,
-              [theme.breakpoints.up('md')]: {
-                marginTop: `calc(${theme.appShell.headerHeightMd} * -1  - ${theme.spacings.lg})`,
-                gridTemplateColumns: '1fr auto',
+
+              '&:not(.variantMdOneColumn)': {
+                paddingRight: `calc((100% - ${theme.breakpoints.values.lg}px) / 2)`,
+              },
+
+              '&.zoomed': {
+                position: 'relative',
+                zIndex: theme.zIndex.modal,
+                marginTop: `calc(${theme.appShell.headerHeightSm} * -1)`,
+                [theme.breakpoints.up('md')]: {
+                  marginTop: `calc(${theme.appShell.headerHeightMd} * -1  - ${theme.spacings.lg})`,
+                  gridTemplateColumns: '1fr auto',
+                },
+                paddingRight: 0,
               },
-              paddingRight: 0,
             },
           ]}
         >
@@ -183,11 +204,13 @@ export function SidebarGallery(props: SidebarGalleryProps) {
                     width: '100%',
                   },
                   [theme.breakpoints.up('md')]: {
-                    height: `calc(${dvh(100)} - ${theme.appShell.headerHeightMd} - ${
-                      theme.spacings.lg
-                    })`,
-                    position: 'sticky',
-                    top: theme.appShell.headerHeightMd,
+                    '&:not(.variantMdOneColumn)': {
+                      height: `max(${dvh(90)}, 40vw)`,
+                      '&.sticky': {
+                        position: 'sticky',
+                        top: theme.appShell.headerHeightMd,
+                      },
+                    },
                   },
                 },
                 zoomed && {
@@ -201,6 +224,7 @@ export function SidebarGallery(props: SidebarGalleryProps) {
                 if (!zoomed) document.body.style.overflow = ''
               }}
             >
+              {beforeScroller}
               <Scroller
                 className={classes.scroller}
                 hideScrollbar
@@ -242,6 +266,7 @@ export function SidebarGallery(props: SidebarGalleryProps) {
                   />
                 ))}
               </Scroller>
+              {afterScroller}
               <MotionBox
                 layout='position'
                 layoutDependency={zoomed}
@@ -333,9 +358,9 @@ export function SidebarGallery(props: SidebarGalleryProps) {
               >
                 {import.meta.graphCommerce.sidebarGallery?.paginationVariant ===
                 'THUMBNAILS_BOTTOM' ? (
-                  <ScrollerThumbnails images={images} />
+                  <ScrollerThumbnails layoutDependency={zoomed} images={images} />
                 ) : (
-                  <ScrollerDots />
+                  <ScrollerDots layout />
                 )}
               </Box>
             </MotionBox>
@@ -353,10 +378,10 @@ export function SidebarGallery(props: SidebarGalleryProps) {
               },
               zoomed && {
                 [theme.breakpoints.up('md')]: {
-                  marginLeft: `calc((${responsiveVal(300, 500, theme.breakpoints.values.lg)} + ${
+                  marginLeft: `calc((${responsiveVal(300, 500, undefined, theme.breakpoints.values.lg)} + ${
                     theme.page.horizontal
                   } * 2) * -1)`,
-                  left: `calc(${responsiveVal(300, 500, theme.breakpoints.values.lg)} + ${
+                  left: `calc(${responsiveVal(300, 500, undefined, theme.breakpoints.values.lg)} + ${
                     theme.page.horizontal
                   } * 2)`,
                 },
@@ -370,9 +395,11 @@ export function SidebarGallery(props: SidebarGalleryProps) {
               sx={{
                 boxSizing: 'border-box',
                 width: '100%',
-                padding: `${theme.spacings.lg} ${theme.page.horizontal}`,
-                [theme.breakpoints.up('md')]: {
-                  paddingLeft: theme.spacings.lg,
+                '&:not(.variantMdOneColumn)': {
+                  padding: `${theme.spacings.lg} ${theme.page.horizontal}`,
+                  [theme.breakpoints.up('md')]: {
+                    paddingLeft: theme.spacings.lg,
+                  },
                 },
               }}
             >

package/Intl/DateTimeFormat/DateFormat.tsx

@@ -0,0 +1,10 @@
+import { DateTimeFormat, DateTimeFormatPropsType } from './DateTimeFormat'
+
+type DateFormatOptions = Omit<
+  DateTimeFormatPropsType,
+  'timeStyle' | 'hour' | 'minute' | 'second' | 'timeZoneName'
+>
+
+export function DateFormat(props: DateFormatOptions) {
+  return <DateTimeFormat timeStyle={undefined} {...props} />
+}

package/Intl/DateTimeFormat/DateTimeFormat.tsx

@@ -0,0 +1,25 @@
+import { useMemo } from 'react'
+import { useLocale } from '../../hooks/useLocale'
+import { useMemoObject } from '../../hooks/useMemoObject'
+
+export function useDateTimeFormatter(props: Intl.DateTimeFormatOptions) {
+  const locale = useLocale()
+  const memoOptions = useMemoObject(props)
+  return useMemo(() => new Intl.DateTimeFormat(locale, memoOptions), [locale, memoOptions])
+}
+
+type DateValue = Date | string | number | null | undefined
+export type DateTimeFormatPropsType = { children: DateValue } & Intl.DateTimeFormatOptions
+
+export function DateTimeFormat(props: DateTimeFormatPropsType) {
+  const { children } = props
+  const formatter = useDateTimeFormatter({ dateStyle: 'medium', timeStyle: 'short', ...props })
+
+  return (
+    <span suppressHydrationWarning>
+      {children
+        ? formatter.format(typeof children === 'string' ? new Date(children) : children)
+        : null}
+    </span>
+  )
+}

package/Intl/DateTimeFormat/TimeFormat.tsx

@@ -0,0 +1,10 @@
+import { DateTimeFormat, DateTimeFormatPropsType } from './DateTimeFormat'
+
+type TimeFormatProps = Omit<
+  DateTimeFormatPropsType,
+  'dateStyle' | 'month' | 'day' | 'era' | 'month' | 'weekday' | 'year'
+>
+
+export function TimeFormat(props: TimeFormatProps) {
+  return <DateTimeFormat dateStyle={undefined} {...props} />
+}

package/Intl/DateTimeFormat/index.ts

@@ -0,0 +1,3 @@
+export * from './DateTimeFormat'
+export * from './DateFormat'
+export * from './TimeFormat'

package/Intl/DisplayNames/DisplayNames.tsx

@@ -0,0 +1,22 @@
+import { useMemo } from 'react'
+import { useLocale } from '../../hooks/useLocale'
+import { useMemoObject } from '../../hooks/useMemoObject'
+
+export type UseDisplayNamesProps = Intl.DisplayNamesOptions
+
+export function useDisplayNames(props: UseDisplayNamesProps) {
+  const locale = useLocale()
+  const memoOptions = useMemoObject(props)
+  return useMemo(() => new Intl.DisplayNames(locale, memoOptions), [locale, memoOptions])
+}
+
+type DisplayNamesProps = UseDisplayNamesProps & {
+  code: string
+}
+
+export function DisplayNames(props: DisplayNamesProps) {
+  const { code, ...options } = props
+  const formatter = useDisplayNames(options)
+
+  return <span suppressHydrationWarning>{formatter.of(code)}</span>
+}

package/Intl/DisplayNames/index.ts

@@ -0,0 +1 @@
+export * from './DisplayNames'

package/Intl/ListFormat.tsx

@@ -0,0 +1,32 @@
+import React, { useMemo } from 'react'
+import { useLocale } from '../hooks'
+
+type ListFormatProps = {
+  children: React.ReactNode[]
+  listStyle?: Intl.ListFormatOptions['style']
+} & Omit<Intl.ListFormatOptions, 'style'>
+
+export function ListFormat(props: ListFormatProps) {
+  const { children, localeMatcher, listStyle: style, type } = props
+
+  const locale = useLocale()
+
+  const formatter = useMemo(
+    () => new Intl.ListFormat(locale, { localeMatcher, style, type }),
+    [locale, localeMatcher, style, type],
+  )
+
+  const childArray = React.Children.toArray(children)
+  const fauxChildren = childArray.map((child, index) => `${index}`) ?? []
+  const parts = formatter.formatToParts(fauxChildren)
+
+  return (
+    <>
+      {parts.map((part) => (
+        <React.Fragment key={part.value}>
+          {part.type === 'literal' ? part.value : childArray[part.value]}
+        </React.Fragment>
+      ))}
+    </>
+  )
+}