@graphcommerce/next-ui 3.18.1 → 3.20.0

package/Layout/components/LayoutHeaderContent.tsx

@@ -0,0 +1,173 @@
+import { useMotionValueValue } from '@graphcommerce/framer-utils'
+import { Divider, makeStyles, Theme } from '@material-ui/core'
+import React, { useRef } from 'react'
+import { UseStyles } from '../../Styles'
+import { classesPicker } from '../../Styles/classesPicker'
+import { useScrollY } from '../hooks/useScrollY'
+import { FloatingProps } from './LayoutHeadertypes'
+
+type Classes = 'bg' | 'content' | 'left' | 'center' | 'right' | 'divider'
+
+const time = '150ms'
+
+const useStyles = makeStyles(
+  (theme: Theme) => ({
+    bg: {
+      position: 'absolute',
+      left: 0,
+      width: '100%',
+      backgroundColor: theme.palette.background.default,
+      opacity: 0,
+      transition: `opacity ${time}`,
+
+      height: theme.appShell.headerHeightSm,
+      [theme.breakpoints.up('md')]: {
+        height: theme.appShell.appBarHeightMd,
+      },
+    },
+    bgFloatingSm: {
+      [theme.breakpoints.down('sm')]: {
+        display: 'none',
+      },
+    },
+    bgFloatingMd: {
+      [theme.breakpoints.up('md')]: {
+        display: 'none',
+      },
+    },
+    bgScrolled: {
+      opacity: 1,
+    },
+    content: {
+      position: 'absolute',
+      left: 0,
+      width: '100%',
+      display: 'grid',
+      gridTemplateAreas: `"left center right"`,
+      gridTemplateColumns: '1fr auto 1fr',
+      alignItems: 'center',
+
+      height: theme.appShell.headerHeightSm,
+      [theme.breakpoints.up('md')]: {
+        padding: `0 ${theme.page.horizontal}`,
+        height: theme.appShell.appBarHeightMd,
+      },
+    },
+    contentFloatingMd: {
+      [theme.breakpoints.up('md')]: {
+        padding: `0 ${theme.page.horizontal}`,
+        background: 'none',
+        pointerEvents: 'none',
+      },
+    },
+    contentFloatingSm: {
+      [theme.breakpoints.down('sm')]: {
+        padding: `0 ${theme.page.horizontal}`,
+        background: 'none',
+        pointerEvents: 'none',
+      },
+    },
+    left: {
+      '& > *': { pointerEvents: 'all' },
+      display: 'grid',
+      gridAutoFlow: 'column',
+      gap: theme.spacings.sm,
+      gridArea: 'left',
+      justifyContent: 'start',
+    },
+    center: {
+      display: 'grid',
+      gridAutoFlow: 'column',
+      gap: theme.spacings.sm,
+      gridArea: 'center',
+      justifyContent: 'start',
+      overflow: 'hidden',
+      transition: `opacity ${time}`,
+      opacity: 0,
+    },
+    centerScrolled: {
+      opacity: 1,
+      '& > *': { pointerEvents: 'all' },
+    },
+    centerFloatingSm: {
+      [theme.breakpoints.down('sm')]: {
+        display: 'none',
+      },
+    },
+    centerFloatingMd: {
+      [theme.breakpoints.up('md')]: {
+        display: 'none',
+      },
+    },
+    right: {
+      '& > *': { pointerEvents: 'all' },
+      display: 'grid',
+      gridAutoFlow: 'column',
+      gap: theme.spacings.sm,
+      gridArea: 'right',
+      justifyContent: 'end',
+    },
+    divider: {
+      position: 'absolute',
+      bottom: 0,
+      left: 0,
+      right: 0,
+      transition: `opacity ${time}`,
+      opacity: 0,
+    },
+    dividerCustomDivider: {
+      opacity: 1,
+    },
+    dividerScrolled: {
+      opacity: 1,
+    },
+    dividerFloatingSm: {
+      [theme.breakpoints.down('sm')]: {
+        display: 'none',
+      },
+    },
+    dividerFloatingMd: {
+      [theme.breakpoints.up('md')]: {
+        display: 'none',
+      },
+    },
+  }),
+  { name: 'LayoutHeaderContent' },
+)
+
+export type ContentProps = FloatingProps &
+  UseStyles<typeof useStyles> & {
+    children?: React.ReactNode
+    left?: React.ReactNode
+    right?: React.ReactNode
+    divider?: React.ReactNode
+  }
+
+export default function LayoutHeaderContent(props: ContentProps) {
+  const ref = useRef<HTMLDivElement>(null)
+  const scroll = useScrollY()
+
+  const { left, children, right, divider, floatingMd = false, floatingSm = false } = props
+  const classes = useStyles(props)
+
+  const scrolled = useMotionValueValue(scroll, (y) => y > 50)
+
+  const className = classesPicker<Classes>(classes, {
+    floatingSm,
+    floatingMd,
+    scrolled,
+    customDivider: !!divider,
+  })
+
+  return (
+    <>
+      <div {...className('bg')} />
+      <div {...className('content')} ref={ref}>
+        <div {...className('left')}>{left}</div>
+        <div {...className('center')}>{children}</div>
+        <div {...className('right')}>{right}</div>
+        <div {...className('divider')}>{divider ?? <Divider />}</div>
+      </div>
+    </>
+  )
+}

package/Layout/components/LayoutHeadertypes.ts

@@ -0,0 +1,10 @@
+type Matrix<T extends string, M extends string> = `${T}${Capitalize<M>}`
+
+// Possible configurations for the AppShellHeader
+export type Variant = 'floating'
+export type Size = 'sm' | 'md'
+
+// Matrix
+export type VariantSize = Matrix<Variant, Size>
+
+export type FloatingProps = Partial<Record<Matrix<Variant, Size>, boolean>>

package/Layout/components/LayoutProvider.tsx

@@ -0,0 +1,17 @@
+import { MotionValue } from 'framer-motion'
+import { useMemo } from 'react'
+import layoutContext from '../context/layoutContext'
+
+export type LayoutProviderProps = {
+  children: React.ReactNode
+  scroll: MotionValue<number>
+}
+
+export default function LayoutProvider(props: LayoutProviderProps) {
+  const { children, scroll } = props
+  return (
+    <layoutContext.Provider value={useMemo(() => ({ scroll }), [scroll])}>
+      {children}
+    </layoutContext.Provider>
+  )
+}

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>
+  )
+}