@graphcommerce/next-ui 3.18.1 → 3.20.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@graphcommerce/next-ui",
-  "version": "3.18.1",
+  "version": "3.20.0",
   "author": "",
   "license": "MIT",
   "scripts": {
@@ -10,12 +10,11 @@
   },
   "dependencies": {
     "@apollo/client": "^3.4.16",
-    "@graphcommerce/framer-next-pages": "^2.107.5",
-    "@graphcommerce/framer-scroller": "^1.0.4",
-    "@graphcommerce/framer-sheet": "^2.106.2",
-    "@graphcommerce/framer-utils": "^2.103.15",
-    "@graphcommerce/graphql": "^2.105.5",
-    "@graphcommerce/image": "^2.105.4",
+    "@graphcommerce/framer-next-pages": "^2.108.0",
+    "@graphcommerce/framer-scroller": "^1.1.0",
+    "@graphcommerce/framer-utils": "^2.103.16",
+    "@graphcommerce/graphql": "^2.105.6",
+    "@graphcommerce/image": "^2.105.5",
     "@lingui/macro": "^3.12.1",
     "@material-ui/core": "^4.12.3",
     "@material-ui/lab": "^4.0.0-alpha.60",
@@ -34,7 +33,7 @@
   },
   "devDependencies": {
     "@graphcommerce/browserslist-config-pwa": "^3.0.2",
-    "@graphcommerce/eslint-config-pwa": "^3.1.5",
+    "@graphcommerce/eslint-config-pwa": "^3.1.6",
     "@graphcommerce/prettier-config-pwa": "^3.0.4",
     "@graphcommerce/typescript-config-pwa": "^3.1.1",
     "@playwright/test": "^1.16.2",
@@ -53,5 +52,5 @@
       "project": "./tsconfig.json"
     }
   },
-  "gitHead": "5ed153aa2213be8363138c0956872fe2fde2f590"
+  "gitHead": "8f156415c7f5a963e363f0d6d18fe5d6bbd5dba2"
 }

package/AppShell/AppShellHeader/appShellHeaderContext.tsx

@@ -1,11 +0,0 @@
-import React from 'react'
-
-export type AppShellHeaderContext = {
-  titleRef: React.RefObject<HTMLDivElement>
-  contentHeaderRef: React.RefObject<HTMLDivElement>
-}
-
-const appShellHeaderContext = React.createContext(undefined as unknown as AppShellHeaderContext)
-appShellHeaderContext.displayName = 'appShellHeaderContext'
-
-export default appShellHeaderContext

package/AppShell/AppShellHeader/index.tsx

@@ -1,438 +0,0 @@
-import { usePageContext, usePageRouter, usePrevUp, useUp } from '@graphcommerce/framer-next-pages'
-import { Fab, makeStyles, Theme } from '@material-ui/core'
-import clsx from 'clsx'
-import { m, MotionValue, useMotionValue, useTransform } from 'framer-motion'
-import PageLink from 'next/link'
-import React, { useCallback, useEffect } from 'react'
-import Button from '../../Button'
-import { UseStyles } from '../../Styles'
-import SvgImageSimple from '../../SvgImage/SvgImageSimple'
-import { iconChevronLeft, iconClose } from '../../icons'
-import useAppShellHeaderContext from './useAppShellHeaderContext'
-
-export type AppShellHeaderProps = {
-  children?: React.ReactNode
-  primary?: React.ReactNode
-  secondary?: React.ReactNode
-  divider?: React.ReactNode
-  /* When a logo is given, children should be given too */
-  logo?: React.ReactNode
-  scrollY: MotionValue<number>
-  hideClose?: boolean
-  scrolled?: boolean
-  dragIndicator?: React.ReactNode
-  additional?: React.ReactNode
-  fill?: 'both' | 'mobile-only'
-  sheet?: boolean
-} & UseStyles<typeof useStyles>
-
-// minHeight: x
-// to reserve space for back & primary buttons,
-// even when there is no app shell header on scroll (e.g. on full page shell)
-const minHeight = 40
-const useStyles = makeStyles(
-  (theme: Theme) => ({
-    divider: {
-      borderBottom: `1px solid ${theme.palette.divider}`,
-    },
-    dividerSpacer: {
-      minHeight: 1,
-    },
-    dividerSheetShell: {
-      marginTop: `calc((${theme.page.headerInnerHeight.md} * 0.15))`,
-    },
-    sheetHeaderContainer: {
-      position: 'sticky',
-      top: 0,
-      zIndex: 98,
-      // reserve space in the container even without any buttons added
-      minHeight: 58,
-    },
-    sheetHeaderContainerSheetShell: {
-      marginBottom: `calc((${theme.page.headerInnerHeight.md} * 0.15) * -1)`,
-    },
-    sheetHeader: {
-      background: theme.palette.background.default,
-      paddingTop: 8,
-      paddingBottom: 8,
-      minHeight,
-      [theme.breakpoints.up('md')]: {
-        minHeight: `calc(${minHeight}px + ${theme.spacings.xxs} * 2)`,
-        paddingTop: theme.spacings.xxs,
-        paddingBottom: theme.spacings.xxs,
-      },
-    },
-    sheetHeaderSheetShell: {
-      // The bottom sheets offset top is x% short compared to the page headers height,
-      // so we add x% of the header height to padding top of bottomsheet actions bar
-      // to keep consistency between app shell buttons.
-      paddingTop: `calc(${theme.spacings.xxs} + (${theme.page.headerInnerHeight.md} * 0.15))`,
-      paddingBottom: `calc(${theme.spacings.xxs} + (${theme.page.headerInnerHeight.md} * 0.15))`,
-      [theme.breakpoints.down('sm')]: {
-        paddingTop: 8,
-        paddingBottom: 8,
-      },
-    },
-    sheetHeaderScrolled: {
-      [theme.breakpoints.up('md')]: {
-        marginTop: -60,
-      },
-    },
-    sheetHeaderActions: {
-      display: 'grid',
-      gridTemplateColumns: `1fr auto 1fr`,
-      gridAutoFlow: 'column',
-      alignItems: 'center',
-      justifyContent: 'space-between',
-      padding: `0 calc(${theme.page.horizontal} + 2px) 0`,
-      width: '100%',
-      minHeight,
-      [theme.breakpoints.up('md')]: {
-        '& * > a, & * > button': {
-          height: minHeight,
-        },
-      },
-      [theme.breakpoints.down('sm')]: {
-        '& div > .MuiFab-sizeSmall': {
-          marginLeft: -8,
-          marginRight: -8,
-        },
-        '& div > .MuiButtonBase-root': {
-          minWidth: 'unset',
-          marginRight: -8,
-          marginLeft: -8,
-        },
-      },
-    },
-    sheetHeaderActionRight: {
-      justifySelf: 'flex-end',
-      '& > .Mui-disabled': {
-        // color: `${theme.palette.primary.contrastText} !important`,
-        [theme.breakpoints.up('sm')]: {
-          opacity: 0.25,
-          color: `${theme.palette.secondary.contrastText} !important`,
-          '& svg': {
-            stroke: `${theme.palette.secondary.contrastText} !important`,
-          },
-        },
-      },
-    },
-    sheetHeaderNoTitle: {
-      pointerEvents: 'none',
-      background: 'transparent',
-    },
-    sheetHeaderNoTitleFillMobileOnly: {
-      [theme.breakpoints.up('md')]: {
-        pointerEvents: 'none',
-        background: 'transparent',
-        top: 98,
-      },
-    },
-    sheetHeaderFillMobileOnly: {
-      [theme.breakpoints.up('md')]: {
-        pointerEvents: 'none',
-        position: 'fixed',
-      },
-    },
-    innerContainer: {
-      display: 'grid',
-      textAlign: 'center',
-      pointerEvents: 'all',
-    },
-    fab: {
-      maxWidth: 38,
-      maxHeight: 38,
-      [theme.breakpoints.down('sm')]: {
-        boxShadow: 'none',
-      },
-    },
-    childs: {
-      marginLeft: 12,
-      marginRight: 12,
-      whiteSpace: 'nowrap',
-      overflow: 'hidden',
-      textOverflow: 'ellipsis',
-    },
-    fillMobileOnly: {
-      [theme.breakpoints.up('md')]: {
-        display: 'none',
-      },
-    },
-    dividerFillMobileOnly: {
-      [theme.breakpoints.up('md')]: {
-        visibility: 'hidden',
-      },
-    },
-    logoContainer: {
-      position: 'absolute',
-      top: 0,
-      left: 0,
-      right: 0,
-      paddingTop: 8,
-      paddingBottom: 8,
-    },
-    logoInnerContainer: {
-      minHeight,
-      display: 'flex',
-      alignItems: 'center',
-      [theme.breakpoints.up('md')]: {
-        display: 'none',
-      },
-    },
-    backButton: {
-      background: theme.palette.background.paper,
-      color: theme.palette.text.primary,
-      '&:hover': {
-        background: theme.palette.background.paper,
-      },
-    },
-    sheetShellActionsFullPage: {
-      '& * > a, & * > button': {
-        pointerEvents: 'all',
-      },
-      '& * > button': {
-        boxShadow: theme.shadows[3],
-      },
-      [theme.breakpoints.up('md')]: {
-        position: 'fixed',
-        top: `calc(${theme.page.headerInnerHeight.md} + ${theme.spacings.xxs})`,
-      },
-    },
-    sheetShellActionsNoButtonShadow: {
-      [theme.breakpoints.down('sm')]: {
-        '& * > button': {
-          boxShadow: 'none',
-        },
-      },
-    },
-  }),
-  { name: 'AppShellHeader' },
-)
-
-export default function AppShellHeader(props: AppShellHeaderProps) {
-  const {
-    children,
-    logo,
-    divider,
-    primary = null,
-    secondary = null,
-    hideClose,
-    scrollY,
-    additional,
-    dragIndicator,
-    scrolled,
-    fill = 'both',
-    sheet,
-  } = props
-
-  const router = usePageRouter()
-  const { closeSteps, backSteps } = usePageContext()
-  const classes = useStyles(props)
-  const up = useUp()
-  const prevUp = usePrevUp()
-  const { titleRef, contentHeaderRef } = useAppShellHeaderContext()
-
-  const noChildren = typeof children === 'undefined' || !children
-
-  const fillMobileOnly = fill === 'mobile-only'
-
-  const sheetHeaderHeight = useMotionValue<number>(0)
-  const titleOffset = useMotionValue<number>(100)
-  const titleHeight = useMotionValue<number>(100)
-
-  const setOffset = useCallback(
-    (offsetTop: number, offsetParent: Element | null, clientHeight: number) => {
-      titleHeight.set(clientHeight)
-      titleOffset.set(offsetTop)
-    },
-    [titleHeight, titleOffset],
-  )
-
-  if (titleRef.current) {
-    setOffset(
-      titleRef.current.offsetTop,
-      titleRef.current.offsetParent,
-      titleRef.current.clientHeight,
-    )
-  }
-
-  // Measure the title sizes so we can animate the opacity
-  useEffect(() => {
-    if (!titleRef.current) return () => {}
-
-    const ro = new ResizeObserver(([entry]) => {
-      const { offsetTop, offsetParent, clientHeight } = entry.target as HTMLDivElement
-
-      setOffset(offsetTop, offsetParent, clientHeight)
-    })
-
-    ro.observe(titleRef.current)
-    return () => ro.disconnect()
-  }, [setOffset, titleHeight, titleOffset, titleRef])
-
-  // Measure the sheetHeight sizes so we can animate the opacity
-  useEffect(() => {
-    if (!contentHeaderRef.current) return () => {}
-
-    const ro = new ResizeObserver(([entry]) =>
-      sheetHeaderHeight.set((entry.target as HTMLDivElement).clientHeight),
-    )
-
-    ro.observe(contentHeaderRef.current)
-
-    return () => ro.disconnect()
-  }, [contentHeaderRef, sheetHeaderHeight])
-
-  const opacityTitle = useTransform(
-    [scrollY, sheetHeaderHeight, titleOffset, titleHeight] as MotionValue<number | string>[],
-    ([scrollYV, sheetHeaderHeightV, titleOffsetV, titleHeigthV]: number[]) =>
-      Math.min(
-        Math.max(
-          0,
-          scrolled
-            ? 1
-            : (scrollYV - Math.max(titleOffsetV, 80) + sheetHeaderHeightV) / titleHeigthV,
-        ),
-        1,
-      ),
-  )
-
-  const pointerEvents = useTransform(opacityTitle, (o) => (o < 0.2 ? 'none' : 'all'))
-  const opacityLogo = useTransform(opacityTitle, [0, 1], [1, fillMobileOnly && primary ? 1 : 0])
-  const pointerEventsLogo = useTransform(opacityLogo, (o) => (o < 0.2 ? 'none' : 'all'))
-
-  const close =
-    !hideClose &&
-    (closeSteps > 0 ? (
-      <Fab
-        size='small'
-        type='button'
-        classes={{ root: classes.fab }}
-        onClick={() => router.go(closeSteps * -1)}
-        aria-label='Close'
-      >
-        <SvgImageSimple src={iconClose} />
-      </Fab>
-    ) : (
-      <PageLink href='/' passHref>
-        <Fab size='small' classes={{ root: classes.fab }} aria-label='Close'>
-          <SvgImageSimple src={iconClose} />
-        </Fab>
-      </PageLink>
-    ))
-
-  const backIcon = <SvgImageSimple src={iconChevronLeft} />
-
-  const canClickBack = backSteps > 0 && router.asPath !== prevUp?.href
-  let back = canClickBack && (
-    <Button
-      onClick={() => router.back()}
-      variant='pill-link'
-      size='small'
-      className={classes.backButton}
-      startIcon={backIcon}
-      aria-label='Back'
-    >
-      {up?.href === router.asPath ? up?.title : 'Back'}
-    </Button>
-  )
-
-  if (!canClickBack && up?.href) {
-    back = (
-      <PageLink href={up?.href} passHref>
-        <Button
-          variant='pill-link'
-          className={classes.backButton}
-          startIcon={backIcon}
-          aria-label='Back'
-        >
-          {up?.title ?? 'Back'}
-        </Button>
-      </PageLink>
-    )
-  }
-
-  let leftAction: React.ReactNode = secondary ?? back
-  const rightAction: React.ReactNode = primary ?? close
-  if (rightAction !== close && !leftAction) leftAction = close
-  if (!leftAction) leftAction = <div />
-
-  const showDivider = children || (fillMobileOnly && primary)
-
-  return (
-    <div
-      className={clsx(
-        classes.sheetHeaderContainer,
-        noChildren && !primary && classes.sheetHeaderNoTitle,
-        fillMobileOnly && classes.sheetHeaderFillMobileOnly,
-        sheet && classes.sheetHeaderContainerSheetShell,
-      )}
-    >
-      <div
-        className={clsx(
-          classes?.sheetHeader,
-          sheet && classes.sheetHeaderSheetShell,
-          scrolled && classes?.sheetHeaderScrolled,
-          noChildren && !primary && classes.sheetHeaderNoTitle,
-          fillMobileOnly && noChildren && classes.sheetHeaderNoTitleFillMobileOnly,
-          fillMobileOnly && classes.sheetHeaderFillMobileOnly,
-        )}
-        ref={contentHeaderRef}
-      >
-        <div className={classes.logoContainer}>
-          {logo && (
-            <m.div
-              style={{
-                opacity: opacityLogo,
-                pointerEvents: pointerEventsLogo,
-              }}
-              className={classes.logoInnerContainer}
-            >
-              {logo}
-            </m.div>
-          )}
-        </div>
-
-        {dragIndicator}
-
-        <div
-          className={clsx(
-            classes.sheetHeaderActions,
-            (noChildren || fillMobileOnly) && classes.sheetShellActionsFullPage,
-            fillMobileOnly && showDivider && classes.sheetShellActionsNoButtonShadow,
-          )}
-        >
-          {leftAction && <div>{leftAction}</div>}
-          <div className={classes.innerContainer}>
-            {children && (
-              <m.div
-                style={{ opacity: opacityTitle, pointerEvents }}
-                className={clsx(classes.childs, fillMobileOnly && classes.fillMobileOnly)}
-              >
-                {children}
-              </m.div>
-            )}
-          </div>
-          <div className={classes?.sheetHeaderActionRight}>{rightAction}</div>
-        </div>
-        {additional && (
-          <div className={clsx(fillMobileOnly && classes.fillMobileOnly)}>
-            <>{additional}</>
-          </div>
-        )}
-      </div>
-      {showDivider &&
-        (divider ?? (
-          <m.div
-            className={clsx(
-              classes.dividerSpacer,
-              classes.divider,
-              fillMobileOnly && classes.dividerFillMobileOnly,
-            )}
-            style={{ opacity: opacityTitle }}
-          />
-        ))}
-      {!showDivider && <div className={classes.dividerSpacer} />}
-    </div>
-  )
-}

package/AppShell/AppShellHeader/useAppShellHeaderContext.tsx

@@ -1,6 +0,0 @@
-import { useContext } from 'react'
-import appShellHeaderContext from './appShellHeaderContext'
-
-export default function useAppShellHeaderContext() {
-  return useContext(appShellHeaderContext)
-}

package/AppShell/AppShellProvider/index.tsx

@@ -1,18 +0,0 @@
-import { useRef } from 'react'
-import appShellHeaderContext, {
-  AppShellHeaderContext,
-} from '../AppShellHeader/appShellHeaderContext'
-
-type AppShellProviderProps = {
-  children: React.ReactNode
-}
-
-export default function AppShellProvider(props: AppShellProviderProps) {
-  const { children } = props
-  const context: AppShellHeaderContext = {
-    titleRef: useRef<HTMLDivElement>(null),
-    contentHeaderRef: useRef<HTMLDivElement>(null),
-  }
-
-  return <appShellHeaderContext.Provider value={context}>{children}</appShellHeaderContext.Provider>
-}

package/AppShell/AppShellTitle/index.tsx

@@ -1,45 +0,0 @@
-import { makeStyles, Theme, TypographyProps } from '@material-ui/core'
-import clsx from 'clsx'
-import React from 'react'
-import { UseStyles } from '../../Styles'
-import Title, { TitleProps } from '../../Title'
-import useAppShellHeaderContext from '../AppShellHeader/useAppShellHeaderContext'
-
-type AppShellTitleProps = {
-  children: React.ReactNode
-  bare?: boolean
-  variant?: TypographyProps['variant']
-} & Pick<TitleProps, 'icon'> &
-  UseStyles<typeof useStyles>
-
-const useStyles = makeStyles(
-  (theme: Theme) => ({
-    title: {},
-    margin: {
-      marginTop: theme.spacings.lg,
-      marginBottom: theme.spacings.lg,
-    },
-  }),
-  {
-    name: 'AppShellTitle',
-  },
-)
-
-export default function AppShellTitle(props: AppShellTitleProps) {
-  const { children, icon, bare, variant } = props
-  const { titleRef } = useAppShellHeaderContext()
-  const classes = useStyles(props)
-
-  return (
-    <Title
-      ref={titleRef}
-      component='h2'
-      size='medium'
-      variant={variant}
-      icon={icon ?? undefined}
-      classes={{ container: clsx(classes.title, !bare && classes.margin) }}
-    >
-      {children}
-    </Title>
-  )
-}

package/AppShell/ForwardButton.tsx

@@ -1,53 +0,0 @@
-import { ButtonProps, makeStyles, Theme } from '@material-ui/core'
-import React from 'react'
-import { SvgImageSimple } from '..'
-import Button from '../Button'
-import { UseStyles } from '../Styles'
-import { iconChevronRight } from '../icons'
-
-const useStyles = makeStyles(
-  (theme: Theme) => ({
-    root: {
-      width: 'min-content',
-      pointerEvents: 'all',
-      [theme.breakpoints.down('sm')]: {
-        height: 40,
-        minWidth: 40,
-        borderRadius: 20,
-      },
-      [theme.breakpoints.down('xs')]: {
-        boxShadow: 'unset',
-        paddingLeft: `12px`,
-        paddingRight: `10px`,
-      },
-    },
-    label: {
-      whiteSpace: 'nowrap',
-    },
-    icon: {
-      display: 'none',
-      [theme.breakpoints.up('sm')]: {
-        display: 'unset',
-      },
-    },
-    text: {
-      pointerEvents: 'none',
-    },
-  }),
-  { name: 'ForwardButton' },
-)
-
-export type ForwardButtonProps = UseStyles<typeof useStyles> & ButtonProps & { down?: boolean }
-
-const ForwardButton = React.forwardRef((props: ForwardButtonProps, ref) => {
-  const { text, icon, ...classes } = useStyles(props)
-  const { children, down, ...fabProps } = props
-
-  return (
-    <Button variant='pill' classes={classes} {...fabProps} ref={ref}>
-      <span className={text}>{children}</span>
-      <SvgImageSimple src={iconChevronRight} size='small' className={classes.root} />
-    </Button>
-  )
-})
-export default ForwardButton

package/AppShell/FullPageShellBase.tsx

@@ -1,82 +0,0 @@
-import { makeStyles, Theme } from '@material-ui/core'
-import clsx from 'clsx'
-import React from 'react'
-import { UseStyles } from '../Styles'
-import AppShellProvider from './AppShellProvider'
-import ShellBase, { PageLayoutBaseProps } from './ShellBase'
-
-const useStyles = makeStyles(
-  (theme: Theme) => ({
-    root: {
-      minHeight: '100vh',
-      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: {
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'center',
-      [theme.breakpoints.up('md')]: {
-        padding: `${theme.spacings.xxs} ${theme.page.horizontal} 0`,
-        marginBottom: theme.spacings.xxs,
-        top: 0,
-        display: 'flex',
-        pointerEvents: 'none',
-        justifyContent: 'left',
-        width: '100%',
-        height: theme.page.headerInnerHeight.md,
-      },
-    },
-    headerAlwaysShow: {
-      [theme.breakpoints.down('sm')]: {
-        marginTop: 20,
-        marginBottom: 22,
-      },
-    },
-  }),
-  { name: 'FullPageShellBase' },
-)
-
-export type FullPageShellBaseProps = {
-  header: React.ReactNode
-  footer: React.ReactNode
-  menuFab?: React.ReactNode
-  cartFab?: React.ReactNode
-  children?: React.ReactNode
-  alwaysShowHeader?: boolean
-} & UseStyles<typeof useStyles> &
-  PageLayoutBaseProps
-
-export default function FullPageShellBase(props: FullPageShellBaseProps) {
-  const { children, header, footer, menuFab, cartFab, name, alwaysShowHeader } = props
-  const classes = useStyles(props)
-
-  return (
-    <div className={classes.root}>
-      <AppShellProvider>
-        <ShellBase name={name}>
-          <header className={clsx(classes.header, alwaysShowHeader && classes.headerAlwaysShow)}>
-            {header}
-          </header>
-          <div>
-            <div className={classes.hideFabsOnVirtualKeyboardOpen}>
-              {menuFab}
-              {cartFab}
-            </div>
-            {children}
-          </div>
-          <div>{footer}</div>
-        </ShellBase>
-      </AppShellProvider>
-    </div>
-  )
-}