@graphcommerce/next-ui 3.0.1

package/AppShell/DesktopNavActions.tsx

@@ -0,0 +1,28 @@
+import { makeStyles, Theme } from '@material-ui/core'
+import { m } from 'framer-motion'
+import React from 'react'
+
+const useStyles = makeStyles(
+  (theme: Theme) => ({
+    actions: {
+      display: 'none',
+      [theme.breakpoints.up('md')]: {
+        '& > *': {
+          pointerEvents: 'all',
+        },
+        alignItems: 'center',
+        display: 'grid',
+        gridAutoFlow: 'column',
+        columnGap: 6,
+      },
+    },
+  }),
+  { name: 'DesktopNavActions' },
+)
+
+export default function DesktopNavActions(props: { children?: React.ReactNode }) {
+  const { children } = props
+  const classes = useStyles()
+
+  return <m.div className={classes.actions}>{children}</m.div>
+}

package/AppShell/DesktopNavBar.tsx

@@ -0,0 +1,110 @@
+import { Link, makeStyles, Theme } from '@material-ui/core'
+import { Scroller, ScrollerButton, ScrollerProvider } from '@graphcommerce/framer-scroller'
+import clsx from 'clsx'
+import PageLink from 'next/link'
+import { useRouter } from 'next/router'
+import React from 'react'
+import SvgImageSimple from '../SvgImage/SvgImageSimple'
+import { iconChevronLeft, iconChevronRight } from '../icons'
+import { MenuProps } from './Menu'
+
+const useStyles = makeStyles(
+  (theme: Theme) => ({
+    container: {
+      minWidth: 200,
+      flex: 1,
+      position: 'relative',
+      pointerEvents: 'all',
+      [theme.breakpoints.down('sm')]: {
+        display: 'none',
+      },
+    },
+    scroller: {
+      display: 'flex',
+      columnGap: 40,
+      padding: '0 40px',
+      minHeight: 40,
+    },
+    prevNext: {
+      pointerEvents: 'all',
+      position: 'absolute',
+      background: theme.palette.background.default,
+      top: 5,
+      [theme.breakpoints.down('sm')]: { display: 'none' },
+      boxShadow: 'none',
+    },
+    prev: {
+      left: 0,
+    },
+    next: {
+      right: 0,
+    },
+    link: {
+      whiteSpace: 'nowrap',
+      color: 'black',
+      '&:hover': {
+        textDecoration: 'none',
+      },
+      paddingTop: 6,
+    },
+    line: {
+      maxWidth: 40,
+      width: '100%',
+      display: 'flex',
+      justifyContent: 'center',
+      height: 2,
+      background: theme.palette.primary.main,
+      margin: '0 auto',
+      marginTop: 6,
+      opacity: 0,
+    },
+    lineShow: {
+      opacity: 1,
+    },
+  }),
+  { name: 'DesktopNavBar' },
+)
+
+export type MenuTabsProps = MenuProps
+
+export default function DesktopNavBar(props: MenuTabsProps) {
+  const { menu } = props
+  const classes = useStyles()
+  const router = useRouter()
+
+  return (
+    <ScrollerProvider scrollSnapAlign='none'>
+      <div className={classes.container}>
+        <Scroller className={classes.scroller} hideScrollbar>
+          {menu.map(({ href, children, ...linkProps }) => (
+            <PageLink key={href.toString()} href={href} {...linkProps} passHref>
+              <Link className={classes.link} variant='h6'>
+                {children}
+                <div
+                  className={clsx(
+                    classes.line,
+                    router.asPath.startsWith(href.toString()) && classes.lineShow,
+                  )}
+                />
+              </Link>
+            </PageLink>
+          ))}
+          <ScrollerButton
+            direction='left'
+            size='small'
+            className={clsx(classes.prevNext, classes.prev)}
+          >
+            <SvgImageSimple src={iconChevronLeft} />
+          </ScrollerButton>
+          <ScrollerButton
+            direction='right'
+            size='small'
+            className={clsx(classes.prevNext, classes.next)}
+          >
+            <SvgImageSimple src={iconChevronRight} />
+          </ScrollerButton>
+        </Scroller>
+      </div>
+    </ScrollerProvider>
+  )
+}

package/AppShell/FixedFab.tsx

@@ -0,0 +1,41 @@
+import { makeStyles, Theme } from '@material-ui/core'
+import { m } from 'framer-motion'
+import { UseStyles } from '../Styles'
+
+const useStyles = makeStyles(
+  (theme: Theme) => ({
+    root: {
+      position: 'fixed',
+      top: 'unset',
+      bottom: 20,
+      right: 20,
+      zIndex: 100,
+      boxShadow: theme.shadows[4],
+      borderRadius: 99,
+      [theme.breakpoints.down('sm')]: {
+        top: 'unset !important',
+      },
+      [theme.breakpoints.up('md')]: {
+        pointerEvents: 'all',
+        top: `calc(${theme.spacings.xxs} - 2px)`,
+        left: `calc(100vw - ${theme.page.horizontal} - 70px)`,
+        bottom: 'unset',
+        boxShadow: 'unset',
+      },
+    },
+  }),
+  {
+    name: 'FixedFab',
+  },
+)
+
+type FixedFabProps = {
+  children: React.ReactNode
+} & UseStyles<typeof useStyles>
+
+export default function FixedFab(props: FixedFabProps) {
+  const { children } = props
+  const classes = useStyles(props)
+
+  return <m.div className={classes.root}>{children}</m.div>
+}

package/AppShell/ForwardButton.tsx

@@ -0,0 +1,53 @@
+import { ButtonProps, makeStyles, Theme } from '@material-ui/core'
+import React from 'react'
+import Button from '../Button'
+import { UseStyles } from '../Styles'
+import SvgImage from '../SvgImage'
+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}>
+      <span className={text}>{children}</span>
+      <SvgImage src={iconChevronRight} alt='chevron right' size='small' classes={{ root: icon }} />
+    </Button>
+  )
+})
+export default ForwardButton

package/AppShell/FullPageShellBase.tsx

@@ -0,0 +1,59 @@
+import { makeStyles, Theme } from '@material-ui/core'
+import { m } from 'framer-motion'
+import React from 'react'
+import { UseStyles } from '../Styles'
+import AppShellProvider from './AppShellProvider'
+import ShellBase, { PageLayoutBaseProps } from './ShellBase'
+
+const useStyles = makeStyles(
+  (theme: Theme) => ({
+    root: {
+      background: '#fff',
+      minHeight: '100vh',
+      display: 'grid',
+      gridTemplateRows: `auto 1fr auto`,
+      gridTemplateColumns: '100%',
+    },
+    header: {
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      [theme.breakpoints.up('md')]: {
+        padding: `${theme.spacings.xxs} ${theme.page.horizontal} 0`,
+        top: 0,
+        display: 'flex',
+        pointerEvents: 'none',
+        justifyContent: 'left',
+        width: '100%',
+        height: theme.page.headerInnerHeight.md,
+      },
+    },
+  }),
+  { name: 'FullPageShellBase' },
+)
+
+export type FullPageShellBaseProps = {
+  header: React.ReactNode
+  footer: React.ReactNode
+  children?: React.ReactNode
+  backFallbackHref?: string | null
+  backFallbackTitle?: string | null
+} & UseStyles<typeof useStyles> &
+  PageLayoutBaseProps
+
+export default function FullPageShellBase(props: FullPageShellBaseProps) {
+  const { children, header, footer, name } = props
+  const classes = useStyles(props)
+
+  return (
+    <div className={classes.root}>
+      <AppShellProvider>
+        <ShellBase name={name}>
+          <header className={classes.header}>{header}</header>
+          <div>{children}</div>
+          <div>{footer}</div>
+        </ShellBase>
+      </AppShellProvider>
+    </div>
+  )
+}

package/AppShell/Menu.tsx

@@ -0,0 +1,7 @@
+import { LinkProps } from 'next/link'
+
+type MenuItemProps = LinkProps & { children: React.ReactNode }
+
+export type MenuProps = {
+  menu: MenuItemProps[]
+}

package/AppShell/MenuFab.tsx

@@ -0,0 +1,132 @@
+import {
+  Divider,
+  Fab,
+  List,
+  ListItem,
+  ListItemText,
+  makeStyles,
+  Menu,
+  Theme,
+} from '@material-ui/core'
+import { m } from 'framer-motion'
+import PageLink from 'next/link'
+import { Router, useRouter } from 'next/router'
+import React from 'react'
+import { UseStyles } from '../Styles'
+import responsiveVal from '../Styles/responsiveVal'
+import SvgImageSimple from '../SvgImage/SvgImageSimple'
+import { iconMenu } from '../icons'
+import { MenuProps } from './Menu'
+import useFabAnimation from './useFabAnimation'
+
+const useStyles = makeStyles(
+  (theme: Theme) => ({
+    menuWrapper: {
+      position: 'fixed',
+      zIndex: 99,
+      left: theme.page.horizontal,
+      top: `calc(${theme.spacings.xxs} - 5px)`,
+      [theme.breakpoints.down('sm')]: {
+        top: 'unset',
+        left: 20,
+        bottom: 20,
+        transform: 'none !important',
+        opacity: '1 !important',
+      },
+    },
+    menuFab: {
+      background: theme.palette.text.primary,
+      boxShadow: theme.shadows[2],
+      width: responsiveVal(42, 56),
+      height: responsiveVal(42, 56),
+      pointerEvents: 'all',
+      '&:hover, &:focus': {
+        background: theme.palette.text.primary,
+      },
+    },
+    menu: {
+      backgroundColor: theme.palette.background.paper,
+      color: theme.palette.text.primary,
+      minWidth: responsiveVal(200, 280),
+    },
+    menuItemText: {
+      fontSize: '1.5em',
+      fontWeight: 500,
+      letterSpacing: '-0.0375em',
+      lineHeight: 1,
+    },
+    menuItem: {},
+  }),
+  { name: 'Menu' },
+)
+
+export type MenuFabProps = MenuProps &
+  UseStyles<typeof useStyles> & { children?: React.ReactNode; search?: React.ReactNode }
+
+export default function MenuFab(props: MenuFabProps) {
+  const { menu, children, search } = props
+  const classes = useStyles(props)
+  const router = useRouter()
+  const [openEl, setOpenEl] = React.useState<null | HTMLElement>(null)
+
+  const { filter, opacity, scale } = useFabAnimation()
+
+  Router.events.on('routeChangeStart', () => setOpenEl(null))
+
+  return (
+    <m.div className={classes.menuWrapper} style={{ opacity, scale, filter }}>
+      <Fab
+        color='primary'
+        aria-label='Open Menu'
+        size='medium'
+        onClick={(event) => setOpenEl(event.currentTarget)}
+        className={classes.menuFab}
+      >
+        <SvgImageSimple src={iconMenu} inverted alt='menu' loading='eager' />
+      </Fab>
+
+      <Menu
+        anchorEl={openEl}
+        open={!!openEl}
+        onClose={() => setOpenEl(null)}
+        classes={{ paper: classes.menu }}
+        disableScrollLock
+      >
+        {search && (
+          <List>
+            <ListItem dense>{search}</ListItem>
+          </List>
+        )}
+        <List>
+          <PageLink href='/' passHref>
+            <ListItem
+              button
+              dense
+              selected={router.asPath === '/'}
+              classes={{ root: classes.menuItem }}
+            >
+              <ListItemText classes={{ primary: classes.menuItemText }}>Home</ListItemText>
+            </ListItem>
+          </PageLink>
+
+          {menu.map(({ href, children: itemChildren, ...linkProps }) => (
+            <PageLink key={href.toString()} href={href} {...linkProps} passHref>
+              <ListItem
+                button
+                dense
+                selected={router.asPath.startsWith(href.toString())}
+                classes={{ root: classes.menuItem }}
+              >
+                <ListItemText classes={{ primary: classes.menuItemText }}>
+                  {itemChildren}
+                </ListItemText>
+              </ListItem>
+            </PageLink>
+          ))}
+        </List>
+        <Divider variant='middle' />
+        <List component='div'>{children}</List>
+      </Menu>
+    </m.div>
+  )
+}

package/AppShell/MenuFabSecondaryItem.tsx

@@ -0,0 +1,32 @@
+import { ListItem, ListItemIcon, ListItemText, makeStyles, Theme } from '@material-ui/core'
+import PageLink from 'next/link'
+import router from 'next/router'
+import React from 'react'
+
+const useStyles = makeStyles(
+  (theme: Theme) => ({
+    listItemText: {},
+    icon: { minWidth: 30 },
+  }),
+  { name: 'FabMenuSecondaryItem' },
+)
+
+export type FabMenuSecondaryItemProps = {
+  href: string
+  children: React.ReactNode
+  icon: React.ReactNode
+}
+
+export default function MenuFabSecondaryItem(props: FabMenuSecondaryItemProps) {
+  const { href, children, icon } = props
+  const classes = useStyles()
+
+  return (
+    <PageLink href={href} passHref>
+      <ListItem component='a' dense button selected={router.asPath.startsWith(href)}>
+        <ListItemIcon classes={{ root: classes.icon }}>{icon}</ListItemIcon>
+        <ListItemText primary={children} classes={{ primary: classes.listItemText }} />
+      </ListItem>
+    </PageLink>
+  )
+}

package/AppShell/MinimalPageShellBase.tsx

@@ -0,0 +1,22 @@
+import { makeStyles, Theme } from '@material-ui/core'
+import React from 'react'
+import FullPageShellBase, { FullPageShellBaseProps } from './FullPageShellBase'
+
+const useStyles = makeStyles(
+  (theme: Theme) => ({
+    header: {
+      [theme.breakpoints.up('md')]: {
+        minHeight: 60,
+      },
+    },
+  }),
+  { name: 'MinimalPageShellBase' },
+)
+
+export type MinimalPageShellBaseProps = FullPageShellBaseProps
+
+export default function MinimalPageShellBase(props: MinimalPageShellBaseProps) {
+  const classes = useStyles(props)
+
+  return <FullPageShellBase {...props} classes={classes} />
+}

package/AppShell/PageShellHeader/index.tsx

@@ -0,0 +1,14 @@
+import { useViewportScroll } from 'framer-motion'
+import React from 'react'
+import AppShellHeader, { AppShellHeaderProps } from '../AppShellHeader'
+
+export type PageShellHeaderProps = Omit<
+  AppShellHeaderProps,
+  'scrollY' | 'hideClose' | 'dragIndicator'
+>
+
+export default function PageShellHeader(props: PageShellHeaderProps) {
+  const { scrollY } = useViewportScroll()
+
+  return <AppShellHeader {...props} scrollY={scrollY} hideClose />
+}

package/AppShell/SheetShellBase/index.tsx

@@ -0,0 +1,107 @@
+import { makeStyles, Theme } from '@material-ui/core'
+import { usePageContext, usePageRouter } from '@graphcommerce/framer-next-pages'
+import {
+  Sheet,
+  SheetBackdrop,
+  SheetContainer,
+  SheetPanel,
+  SheetProps,
+  SnapPoint,
+  styles,
+} from '@graphcommerce/framer-sheet'
+import { useDomEvent } from 'framer-motion'
+import { useRouter } from 'next/router'
+import React, { useRef } from 'react'
+import responsiveVal from '../../Styles/responsiveVal'
+import AppShellProvider from '../AppShellProvider'
+import ShellBase, { PageLayoutBaseProps } from '../ShellBase'
+import useSheetStyles from './useSheetStyles'
+
+export type SheetShellBaseProps = {
+  header?: React.ReactNode
+  children?: React.ReactNode
+} & Pick<SheetProps, 'size' | 'variant'> &
+  PageLayoutBaseProps
+
+const useStyles = makeStyles(
+  (theme: Theme) => ({
+    container: {
+      ...styles.container,
+    },
+    containertop: {
+      ...styles.containertop,
+    },
+    containerbottom: {
+      ...styles.containerbottom,
+      paddingTop: `calc(${theme.page.headerInnerHeight.md} * 0.55)`,
+      [theme.breakpoints.up('md')]: {
+        // offset top is x% of the header height, so it slightly overlaps the logo
+        paddingTop: `calc(${theme.page.headerInnerHeight.md} * 0.85)`,
+      },
+    },
+    containerleft: {
+      ...styles.containerleft,
+      paddingRight: responsiveVal(26, 48),
+    },
+    containerright: {
+      ...styles.containerright,
+      paddingLeft: responsiveVal(26, 48),
+    },
+  }),
+  { name: 'SheetShellBase' },
+)
+
+function SheetShellBase(props: SheetShellBaseProps) {
+  const { children, variant, size, name } = props
+  const sheetContainerClasses = useStyles()
+  const sheetClasses = useSheetStyles(props)
+  const router = useRouter()
+  const pageRouter = usePageRouter()
+  const { depth, closeSteps, active } = usePageContext()
+  const open = depth < 0 || router.asPath === pageRouter.asPath
+  const initialLocale = useRef(router.locale)
+
+  function handleClose() {
+    return initialLocale.current !== router.locale
+      ? pageRouter.push('/')
+      : pageRouter.go(closeSteps * -1)
+  }
+
+  function handleSnap(snapPoint: SnapPoint) {
+    if (snapPoint !== 'closed') return
+    // eslint-disable-next-line @typescript-eslint/no-floating-promises
+    handleClose()
+  }
+
+  const windowRef = useRef(typeof window !== 'undefined' ? window : null)
+
+  function handleEscapeKey(e: KeyboardEvent | Event) {
+    if (active) {
+      if ((e as KeyboardEvent)?.key === 'Escape') {
+        // eslint-disable-next-line @typescript-eslint/no-floating-promises
+        handleClose()
+      }
+    }
+  }
+
+  useDomEvent(windowRef, 'keyup', handleEscapeKey, { passive: true })
+
+  return (
+    <AppShellProvider>
+      <ShellBase name={name}>
+        <Sheet open={open} onSnap={handleSnap} variant={variant} size={size}>
+          <SheetBackdrop onTap={handleClose} classes={sheetClasses} />
+          <SheetContainer classes={sheetContainerClasses}>
+            <SheetPanel classes={sheetClasses}>
+              {/* <FocusLock returnFocus={{ preventScroll: true }} disabled={!isActive}> */}
+              {children}
+              {/* </FocusLock> */}
+            </SheetPanel>
+          </SheetContainer>
+        </Sheet>
+      </ShellBase>
+    </AppShellProvider>
+  )
+}
+
+export default SheetShellBase

package/AppShell/SheetShellBase/useSheetStyles.ts

@@ -0,0 +1,11 @@
+import { makeStyles, StyleRules, Theme } from '@material-ui/core'
+import { ClassNameMap } from '@material-ui/styles'
+import styles, { ClassKeys } from '@graphcommerce/framer-sheet/styles'
+
+type UseSheetStylesReturn = (props?: Record<string, unknown>) => ClassNameMap<ClassKeys>
+
+const useSheetStyles = makeStyles<Theme, never, ClassKeys>(styles as StyleRules<ClassKeys>, {
+  name: 'Sheet',
+}) as UseSheetStylesReturn
+
+export default useSheetStyles

package/AppShell/SheetShellDragIndicator/index.tsx

@@ -0,0 +1,48 @@
+import { makeStyles } from '@material-ui/core'
+import { SheetDragIndicator, SheetDragIndicatorProps, styles } from '@graphcommerce/framer-sheet'
+import React from 'react'
+import responsiveVal from '../../Styles/responsiveVal'
+
+const useStyles = makeStyles(
+  () => ({
+    indicatorRoot: {
+      ...styles.indicatorRoot,
+      position: 'absolute',
+      left: 0,
+      right: 0,
+      top: 0,
+    },
+    indicatorRoottop: {
+      ...styles.indicatorRoottop,
+      padding: `${responsiveVal(4, 8)} 4px 4px 4px`,
+    },
+    indicatorRootbottom: {
+      ...styles.indicatorRootbottom,
+      padding: `${responsiveVal(4, 8)} 4px 4px 4px`,
+    },
+    indicatorRootleft: {
+      ...styles.indicatorRootleft,
+    },
+    indicatorRootright: {
+      ...styles.indicatorRootright,
+    },
+    indicator: {
+      ...styles.indicator,
+      borderRadius: 99,
+      backgroundColor: '#ddd',
+    },
+    indicatortop: { ...styles.indicatortop, width: responsiveVal(12, 40), height: 4 },
+    indicatorbottom: { ...styles.indicatorbottom, width: responsiveVal(12, 40), height: 4 },
+    indicatorleft: { ...styles.indicatorleft, width: 4, height: responsiveVal(12, 40) },
+    indicatorright: { ...styles.indicatorright, width: 4, height: responsiveVal(12, 40) },
+  }),
+  { name: 'SheetShellDragIndicator' },
+)
+
+type SheetShellDragIndicatorProps = SheetDragIndicatorProps
+
+export default function SheetShellDragIndicator(props: SheetShellDragIndicatorProps) {
+  const classes = useStyles()
+
+  return <SheetDragIndicator {...props} classes={classes} />
+}