@graphcommerce/next-ui 3.19.0 → 3.20.2

package/{Title/index.tsx → Layout/components/LayoutTitle.tsx}

@@ -1,10 +1,10 @@
 import { makeStyles, Theme, Typography, TypographyProps } from '@material-ui/core'
-import clsx from 'clsx'
 import React from 'react'
-import { responsiveVal } from '..'
-import { UseStyles } from '../Styles'
-import SvgImage, { SvgImageProps } from '../SvgImage'
-import SvgImageSimple from '../SvgImage/SvgImageSimple'
+import { UseStyles } from '../../Styles'
+import { classesPicker } from '../../Styles/classesPicker'
+import { responsiveVal } from '../../Styles/responsiveVal'
+import { SvgImageProps } from '../../SvgImage'
+import SvgImageSimple from '../../SvgImage/SvgImageSimple'
 
 const useStyles = makeStyles(
   (theme: Theme) => ({
@@ -18,8 +18,7 @@ const useStyles = makeStyles(
         flexFlow: 'column',
       },
     },
-    typography: {},
-    small: {
+    containerSizeSmall: {
       flexFlow: 'unset',
       '& svg': {
         width: responsiveVal(24, 28),
@@ -27,10 +26,15 @@ const useStyles = makeStyles(
         strokeWidth: 1.4,
       },
     },
+    containerGutterTop: {
+      marginTop: theme.spacings.xl,
+    },
+    containerGutterBottom: {
+      marginBottom: theme.spacings.lg,
+    },
+    typography: {},
   }),
-  {
-    name: 'Title',
-  },
+  { name: 'Title' },
 )
 
 export type TitleProps = {
@@ -38,17 +42,24 @@ export type TitleProps = {
   icon?: SvgImageProps['src']
   size?: 'small' | 'medium'
   variant?: TypographyProps['variant']
+  gutterTop?: boolean
+  gutterBottom?: boolean
   component?: React.ElementType
 } & UseStyles<typeof useStyles>
 
-const Title = React.forwardRef<HTMLDivElement, TitleProps>((props, ref) => {
+export const LayoutTitle = React.forwardRef<HTMLDivElement, TitleProps>((props, ref) => {
   const { children, icon, size = 'medium', component, variant } = props
   const classes = useStyles(props)
   const small = size === 'small'
 
+  const gutterTop = !!(props.gutterTop ?? size !== 'small')
+  const gutterBottom = !!(props.gutterBottom ?? size !== 'small')
+
+  const className = classesPicker(classes, { size, gutterBottom, gutterTop })
+
   return (
-    <div className={clsx(classes.container, small && classes.small)}>
-      {icon && <SvgImageSimple src={icon} size='xl' />}
+    <div {...className('container')}>
+      {icon && <SvgImageSimple src={icon} size={small ? 'large' : 'xl'} />}
       <Typography
         ref={ref}
         variant={variant || (small ? 'h6' : 'h3')}
@@ -60,5 +71,3 @@ const Title = React.forwardRef<HTMLDivElement, TitleProps>((props, ref) => {
     </div>
   )
 })
-
-export default Title

package/Layout/context/layoutContext.tsx

@@ -0,0 +1,7 @@
+import React from 'react'
+import { LayoutContext } from '../types'
+
+const layoutContext = React.createContext(undefined as unknown as LayoutContext)
+layoutContext.displayName = 'layoutContext'
+
+export default layoutContext

package/Layout/hooks/useScrollY.tsx

@@ -0,0 +1,6 @@
+import { useContext } from 'react'
+import layoutContext from '../context/layoutContext'
+
+export function useScrollY() {
+  return useContext(layoutContext).scroll
+}

package/Layout/index.ts

@@ -0,0 +1,5 @@
+export * from './types'
+export * from './components/LayoutHeader'
+export * from './components/LayoutProvider'
+export * from './components/LayoutTitle'
+export * from './hooks/useScrollY'

package/Layout/types.ts

@@ -0,0 +1,5 @@
+import { MotionValue } from 'framer-motion'
+
+export type LayoutContext = {
+  scroll: MotionValue<number>
+}

package/LayoutDefault/components/LayoutDefault.tsx

@@ -0,0 +1,90 @@
+import { usePageRouter, useScrollOffset } from '@graphcommerce/framer-next-pages'
+import { makeStyles, Theme } from '@material-ui/core'
+import clsx from 'clsx'
+import { useTransform, useViewportScroll } from 'framer-motion'
+import React from 'react'
+import LayoutProvider from '../../Layout/components/LayoutProvider'
+import { UseStyles } from '../../Styles'
+
+const useStyles = makeStyles(
+  (theme: Theme) => ({
+    root: {
+      minHeight: '100vh',
+      '@supports (-webkit-touch-callout: none)': {
+        minHeight: '-webkit-fill-available',
+      },
+      display: 'grid',
+      gridTemplateRows: `auto 1fr auto`,
+      gridTemplateColumns: '100%',
+      background: theme.palette.background.default,
+    },
+    hideFabsOnVirtualKeyboardOpen: {
+      [theme.breakpoints.down('sm')]: {
+        '@media (max-height: 530px)': {
+          display: 'none',
+        },
+      },
+    },
+    header: {
+      zIndex: theme.zIndex.appBar - 1,
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      height: theme.appShell.headerHeightSm,
+      pointerEvents: 'none',
+      '& > *': {
+        pointerEvents: 'all',
+      },
+      [theme.breakpoints.up('md')]: {
+        height: theme.appShell.headerHeightMd,
+        padding: `0 ${theme.page.horizontal} 0`,
+        top: 0,
+        display: 'flex',
+        justifyContent: 'left',
+        width: '100%',
+      },
+    },
+    headerSticky: {
+      [theme.breakpoints.down('sm')]: {
+        position: 'sticky',
+        top: 0,
+      },
+    },
+  }),
+  { name: 'LayoutDefault' },
+)
+
+export type LayoutDefaultProps = {
+  header: React.ReactNode
+  footer: React.ReactNode
+  menuFab?: React.ReactNode
+  cartFab?: React.ReactNode
+  children?: React.ReactNode
+  noSticky?: boolean
+} & UseStyles<typeof useStyles>
+
+export function LayoutDefault(props: LayoutDefaultProps) {
+  const { children, header, footer, menuFab, cartFab, noSticky } = props
+  const classes = useStyles(props)
+
+  const offset = useScrollOffset().y
+  const scrollWithOffset = useTransform(useViewportScroll().scrollY, (y) => y + offset)
+
+  return (
+    <div className={classes.root}>
+      <LayoutProvider scroll={scrollWithOffset}>
+        <header className={clsx(classes.header, !noSticky && classes.headerSticky)}>
+          {header}
+        </header>
+        <div>
+          <div className={classes.hideFabsOnVirtualKeyboardOpen}>
+            {menuFab}
+            {cartFab}
+          </div>
+          {children}
+        </div>
+        <div>{footer}</div>
+      </LayoutProvider>
+    </div>
+  )
+}

package/LayoutDefault/index.ts

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

package/LayoutOverlay/components/LayoutOverlay.tsx

@@ -0,0 +1,25 @@
+import { ScrollerProvider, ScrollSnapType } from '@graphcommerce/framer-scroller'
+import React from 'react'
+import { SetOptional } from 'type-fest'
+import { LayoutOverlayBase, LayoutOverlayBaseProps } from './LayoutOverlayBase'
+
+export type { LayoutOverlayVariant } from './LayoutOverlayBase'
+
+export type LayoutOverlayProps = SetOptional<LayoutOverlayBaseProps, 'variantSm' | 'variantMd'>
+
+export function LayoutOverlay(props: LayoutOverlayProps) {
+  const { children, variantSm = 'bottom', variantMd = 'right', classes } = props
+
+  const scrollSnapTypeSm: ScrollSnapType =
+    variantSm === 'left' || variantSm === 'right' ? 'both mandatory' : 'block proximity'
+  const scrollSnapTypeMd: ScrollSnapType =
+    variantMd === 'left' || variantMd === 'right' ? 'both mandatory' : 'block proximity'
+
+  return (
+    <ScrollerProvider scrollSnapTypeSm={scrollSnapTypeSm} scrollSnapTypeMd={scrollSnapTypeMd}>
+      <LayoutOverlayBase variantMd={variantMd} variantSm={variantSm} classes={classes}>
+        {children}
+      </LayoutOverlayBase>
+    </ScrollerProvider>
+  )
+}

package/LayoutOverlay/components/LayoutOverlayBase.tsx

@@ -0,0 +1,354 @@
+import { usePageContext, usePageRouter, useScrollOffset } from '@graphcommerce/framer-next-pages'
+import { Scroller, useScrollerContext, useScrollTo } from '@graphcommerce/framer-scroller'
+import { useElementScroll, useIsomorphicLayoutEffect } from '@graphcommerce/framer-utils'
+import { makeStyles, Theme, ClickAwayListener } from '@material-ui/core'
+import {
+  m,
+  MotionValue,
+  useDomEvent,
+  useMotionValue,
+  usePresence,
+  useTransform,
+} from 'framer-motion'
+import React, { useCallback, useEffect, useRef } from 'react'
+import LayoutProvider from '../../Layout/components/LayoutProvider'
+import { UseStyles } from '../../Styles'
+import { classesPicker } from '../../Styles/classesPicker'
+import { useOverlayPosition } from '../hooks/useOverlayPosition'
+
+const useStyles = makeStyles(
+  (theme: Theme) => ({
+    root: {
+      display: 'grid',
+      cursor: 'default',
+      overflow: 'auto',
+      height: '100vh',
+      '@supports (-webkit-touch-callout: none)': {
+        height: '-webkit-fill-available',
+      },
+    },
+    rootVariantSmLeft: {
+      [theme.breakpoints.down('sm')]: {
+        gridTemplate: `
+          "overlay beforeOverlay"
+          "afterOverlay afterOverlay"
+        `,
+      },
+    },
+    rootVariantMdLeft: {
+      [theme.breakpoints.up('md')]: {
+        gridTemplate: `
+          "overlay beforeOverlay"
+          "afterOverlay afterOverlay"
+        `,
+      },
+    },
+    rootVariantSmRight: {
+      [theme.breakpoints.down('sm')]: {
+        gridTemplate: `
+          "beforeOverlay overlay"
+          "afterOverlay afterOverlay"
+        `,
+      },
+    },
+    rootVariantMdRight: {
+      [theme.breakpoints.up('md')]: {
+        gridTemplate: `
+          "beforeOverlay overlay"
+          "afterOverlay afterOverlay"
+        `,
+      },
+    },
+    rootVariantSmBottom: {
+      [theme.breakpoints.down('sm')]: {
+        gridTemplate: `"beforeOverlay" "overlay" "afterOverlay"`,
+        height: '100vh',
+        '@supports (-webkit-touch-callout: none)': {
+          height: '-webkit-fill-available',
+        },
+      },
+    },
+    rootVariantMdBottom: {
+      [theme.breakpoints.up('md')]: {
+        gridTemplate: `"beforeOverlay" "overlay" "afterOverlay"`,
+        height: '100vh',
+      },
+    },
+    beforeOverlay: {
+      gridArea: 'beforeOverlay',
+      scrollSnapAlign: 'start',
+      scrollSnapStop: 'always',
+      display: 'grid',
+      alignContent: 'end',
+    },
+    beforeOverlayVariantSmRight: {
+      [theme.breakpoints.down('sm')]: {
+        width: '100vw',
+      },
+    },
+    beforeOverlayVariantMdRight: {
+      [theme.breakpoints.up('md')]: {
+        width: '100vw',
+      },
+    },
+
+    beforeOverlayVariantSmLeft: {
+      [theme.breakpoints.down('sm')]: {
+        width: '100vw',
+      },
+    },
+    beforeOverlayVariantMdLeft: {
+      [theme.breakpoints.up('md')]: {
+        width: '100vw',
+      },
+    },
+
+    beforeOverlayVariantMdBottom: {
+      [theme.breakpoints.up('md')]: {
+        height: '100vh',
+      },
+    },
+    beforeOverlayVariantSmBottom: {
+      [theme.breakpoints.down('sm')]: {
+        height: '100vh',
+        '@supports (-webkit-touch-callout: none)': {
+          height: '-webkit-fill-available',
+        },
+      },
+    },
+    overlay: {
+      pointerEvents: 'none',
+      gridArea: 'overlay',
+      scrollSnapAlign: 'start',
+      width: 'min-content',
+      minHeight: '100vh',
+      '@supports (-webkit-touch-callout: none)': {
+        minHeight: '-webkit-fill-available',
+      },
+    },
+    overlayVariantSmBottom: {
+      [theme.breakpoints.down('sm')]: {
+        marginTop: `calc(${theme.appShell.headerHeightSm} * 0.5 * -1)`,
+        paddingTop: `calc(${theme.appShell.headerHeightSm} * 0.5)`,
+        scrollSnapStop: 'always',
+        display: 'grid',
+      },
+    },
+    overlayVariantMdBottom: {
+      [theme.breakpoints.up('md')]: {
+        marginTop: `calc(${theme.appShell.headerHeightMd} + (${theme.appShell.appBarHeightMd} - ${theme.appShell.appBarInnerHeightMd}) * 0.5)`,
+        paddingTop: `calc(${theme.appShell.headerHeightMd} + (${theme.appShell.appBarHeightMd} - ${theme.appShell.appBarInnerHeightMd}) * -0.5)`,
+        scrollSnapAlign: 'start',
+        scrollSnapStop: 'always',
+        display: 'grid',
+      },
+    },
+    overlayPane: {
+      pointerEvents: 'all',
+      backgroundColor: theme.palette.background.paper,
+      boxShadow: theme.shadows[24],
+      minWidth: 'min(800px, 90vw)',
+    },
+    overlayPaneVariantSmBottom: {
+      [theme.breakpoints.down('sm')]: {
+        width: '100vw',
+        borderRadius: 10,
+      },
+    },
+    overlayPaneVariantMdBottom: {
+      [theme.breakpoints.up('md')]: {
+        width: '100vw',
+        borderRadius: 10,
+      },
+    },
+    overlayPaneVariantSmLeft: {
+      [theme.breakpoints.down('sm')]: {
+        paddingBottom: 1,
+        minHeight: '100vh',
+        '@supports (-webkit-touch-callout: none)': {
+          minHeight: '-webkit-fill-available',
+        },
+      },
+    },
+    overlayPaneVariantMdLeft: {
+      [theme.breakpoints.up('md')]: {
+        paddingBottom: 1,
+        minHeight: '100vh',
+        '@supports (-webkit-touch-callout: none)': {
+          minHeight: '-webkit-fill-available',
+        },
+      },
+    },
+    overlayPaneVariantSmRight: {
+      [theme.breakpoints.down('sm')]: {
+        paddingBottom: 1,
+        minHeight: '100vh',
+        '@supports (-webkit-touch-callout: none)': {
+          minHeight: '-webkit-fill-available',
+        },
+      },
+    },
+    overlayPaneVariantMdRight: {
+      [theme.breakpoints.up('md')]: {
+        paddingBottom: 1,
+        minHeight: '100vh',
+        '@supports (-webkit-touch-callout: none)': {
+          minHeight: '-webkit-fill-available',
+        },
+      },
+    },
+    afterOverlay: {
+      gridArea: 'afterOverlay',
+      scrollSnapAlign: 'start',
+    },
+    backdrop: {
+      zIndex: -1,
+      position: 'fixed',
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      right: 0,
+      bottom: 0,
+      top: 0,
+      left: 0,
+      backgroundColor: 'rgba(0, 0, 0, 0.5)',
+      WebkitTapHighlightColor: 'transparent',
+    },
+  }),
+  { name: 'Overlay' },
+)
+
+export type LayoutOverlayVariant = 'left' | 'bottom' | 'right'
+
+export type LayoutOverlayBaseProps = {
+  children?: React.ReactNode
+  variantSm: LayoutOverlayVariant
+  variantMd: LayoutOverlayVariant
+} & UseStyles<typeof useStyles>
+
+export enum OverlayPosition {
+  UNOPENED = -1,
+  OPENED = 1,
+  CLOSED = 0,
+}
+
+export function LayoutOverlayBase(props: LayoutOverlayBaseProps) {
+  const { children, variantSm, variantMd } = props
+  const { scrollerRef } = useScrollerContext()
+  const positions = useOverlayPosition()
+  const scrollTo = useScrollTo()
+  const [isPresent, safeToRemove] = usePresence()
+
+  const { closeSteps, active, direction } = usePageContext()
+  const pageRouter = usePageRouter()
+
+  const position = useMotionValue<OverlayPosition>(OverlayPosition.UNOPENED)
+
+  const classes = useStyles(props)
+  const className = classesPicker(classes, { variantSm, variantMd })
+
+  const overlayRef = useRef<HTMLDivElement>(null)
+
+  const scroll = useElementScroll(scrollerRef)
+
+  useIsomorphicLayoutEffect(() => {
+    const scroller = scrollerRef.current
+    if (!scroller || !isPresent) return
+
+    const open = { x: positions.open.x.get(), y: positions.open.y.get() }
+
+    if (direction === 1 && position.get() !== OverlayPosition.OPENED) {
+      scroller.scrollLeft = positions.closed.x.get()
+      scroller.scrollTop = positions.closed.y.get()
+      // eslint-disable-next-line @typescript-eslint/no-floating-promises
+      scrollTo(open).then(() => {
+        scroller.scrollLeft = positions.open.x.get()
+        scroller.scrollTop = positions.open.y.get()
+        position.set(OverlayPosition.OPENED)
+      })
+    } else {
+      scroller.scrollLeft = open.x
+      scroller.scrollTop = open.y
+    }
+  }, [direction, isPresent, position, positions, scrollTo, scrollerRef])
+
+  // Make sure the overlay stays open when resizing the window.
+  useEffect(() => {
+    const scroller = scrollerRef.current
+    if (!scroller) return () => {}
+
+    const resize = () => {
+      if (positions.open.visible.get() !== 1) return
+      scroller.scrollLeft = positions.open.x.get()
+      scroller.scrollTop = positions.open.y.get()
+    }
+
+    window.addEventListener('resize', resize)
+    return () => window.removeEventListener('resize', resize)
+    // We're not checking for all deps, because that will cause rerenders.
+    // The scroller context shouldn't be changing, but at the moment it is.
+  }, [positions, scrollerRef])
+
+  useEffect(() => {
+    if (isPresent) return
+
+    position.set(OverlayPosition.CLOSED)
+    // eslint-disable-next-line @typescript-eslint/no-floating-promises
+    scrollTo({
+      x: positions.closed.x.get(),
+      y: positions.closed.y.get(),
+    }).then(() => safeToRemove?.())
+  }, [isPresent, position, positions, safeToRemove, scrollTo])
+
+  // Only go back to a previous page if the overlay isn't closed.
+  const closeOverlay = useCallback(() => {
+    if (position.get() !== OverlayPosition.OPENED) return
+    position.set(OverlayPosition.CLOSED)
+    // eslint-disable-next-line @typescript-eslint/no-floating-promises
+    pageRouter.go(closeSteps * -1)
+  }, [closeSteps, pageRouter, position])
+
+  // Handle escape key
+  const windowRef = useRef(typeof window !== 'undefined' ? window : null)
+  const handleEscape = (e: KeyboardEvent | Event) => {
+    if (active && (e as KeyboardEvent)?.key === 'Escape') closeOverlay()
+  }
+  useDomEvent(windowRef, 'keyup', handleEscape, { passive: true })
+
+  // When the overlay isn't visible anymore, we navigate back.
+  useEffect(() => positions.open.visible.onChange((o) => o === 0 && closeOverlay()))
+
+  // Measure the offset of the overlay in the scroller.
+
+  const offsetY = useMotionValue(0)
+  useEffect(() => {
+    if (!overlayRef.current) return () => {}
+    const ro = new ResizeObserver(([entry]) => offsetY.set(entry.contentRect.top))
+    ro.observe(overlayRef.current)
+    return () => ro.disconnect()
+  }, [offsetY])
+
+  // Create the exact position for the LayoutProvider which offsets the top of the overlay
+  const offsetPageY = useScrollOffset().y
+  const scrollWithoffset = useTransform(
+    [scroll.y, positions.open.y, offsetY] as MotionValue<number | string>[],
+    ([y, openY, offsetYv]: number[]) => Math.max(0, y - openY - offsetYv + offsetPageY),
+  )
+
+  return (
+    <>
+      <m.div {...className('backdrop')} style={{ opacity: positions.open.visible }} />
+      <Scroller {...className('root')} grid={false} hideScrollbar>
+        <div {...className('beforeOverlay')} />
+        <div {...className('overlay')} ref={overlayRef}>
+          <ClickAwayListener onClickAway={closeOverlay}>
+            <div {...className('overlayPane')}>
+              <LayoutProvider scroll={scrollWithoffset}>{children}</LayoutProvider>
+            </div>
+          </ClickAwayListener>
+        </div>
+        <div {...className('afterOverlay')} />
+      </Scroller>
+    </>
+  )
+}

package/LayoutOverlay/components/LayoutOverlayHeader.tsx

@@ -0,0 +1,5 @@
+import { LayoutHeaderProps, LayoutHeader } from '../../Layout'
+
+export function LayoutOverlayHeader(props: LayoutHeaderProps) {
+  return <LayoutHeader {...props} noAlign />
+}

package/LayoutOverlay/hooks/useOverlayPosition.ts

@@ -0,0 +1,70 @@
+import { useScrollerContext } from '@graphcommerce/framer-scroller'
+import {
+  useConstant,
+  useElementScroll,
+  useIsomorphicLayoutEffect,
+} from '@graphcommerce/framer-utils'
+import { motionValue } from 'framer-motion'
+import { useEffect } from 'react'
+
+export function useOverlayPosition() {
+  const { getScrollSnapPositions, scrollerRef } = useScrollerContext()
+
+  const state = useConstant(() => ({
+    open: {
+      x: motionValue(0),
+      y: motionValue(0),
+      visible: motionValue(0),
+    },
+    closed: { x: motionValue(0), y: motionValue(0) },
+  }))
+
+  const scroll = useElementScroll(scrollerRef)
+
+  useIsomorphicLayoutEffect(() => {
+    if (!scrollerRef.current) return () => {}
+
+    const measure = () => {
+      const positions = getScrollSnapPositions()
+      state.open.x.set(positions.x[1] ?? 0)
+      state.closed.x.set(positions.x[0])
+      state.open.y.set(positions.y[1] ?? 0)
+      state.closed.y.set(positions.y[0])
+    }
+    const ro = new ResizeObserver(measure)
+    measure()
+
+    ro.observe(scrollerRef.current)
+    return () => ro.disconnect()
+  })
+
+  // sets a float between 0 and 1 for the visibility of the overlay
+  useEffect(() => {
+    const calc = () => {
+      const x = scroll.x.get()
+      const y = scroll.y.get()
+
+      const yC = state.closed.y.get()
+      const yO = state.open.y.get()
+      const visY = yC === yO ? 1 : Math.max(0, Math.min(1, (y - yC) / (yO - yC)))
+
+      const xC = state.closed.x.get()
+      const xO = state.open.x.get()
+      const visX = xO === xC ? 1 : Math.max(0, Math.min(1, (x - xC) / (xO - xC)))
+
+      // todo: visibility sometimes flickers
+      state.open.visible.set(visY * visX)
+    }
+
+    const cancelY = scroll.y.onChange(calc)
+    const cancelX = scroll.x.onChange(calc)
+    calc()
+
+    return () => {
+      cancelY()
+      cancelX()
+    }
+  }, [state, scroll])
+
+  return state
+}

package/LayoutOverlay/index.ts

@@ -0,0 +1,2 @@
+export * from './components/LayoutOverlay'
+export * from './components/LayoutOverlayHeader'

package/Page/App.tsx

@@ -2,6 +2,7 @@ import { FramerNextPages } from '@graphcommerce/framer-next-pages'
 import { LazyMotion } from 'framer-motion'
 import { AppPropsType } from 'next/dist/shared/lib/utils'
 import React, { useEffect } from 'react'
+import PageLoadIndicator from '../PageLoadIndicator'
 import { AppProps } from './types'
 
 export default function App(props: AppProps & AppPropsType) {
@@ -9,6 +10,7 @@ export default function App(props: AppProps & AppPropsType) {
 
   return (
     <LazyMotion features={async () => (await import('./framerFeatures')).default} strict>
+      <PageLoadIndicator />
       <FramerNextPages {...props} />
     </LazyMotion>
   )