@graphcommerce/next-ui 3.25.3 → 4.0.0

package/LayoutParts/DesktopNavBar.tsx

@@ -0,0 +1,113 @@
+import { Scroller, ScrollerButton, ScrollerProvider } from '@graphcommerce/framer-scroller'
+import { Box, BoxProps } from '@mui/material'
+import React from 'react'
+import { extendableComponent } from '../Styles/extendableComponent'
+import { SvgIcon, SvgIconProps } from '../SvgIcon/SvgIcon'
+import { iconChevronLeft, iconChevronRight } from '../icons'
+
+export type MenuTabsProps = {
+  children: React.ReactNode
+  iconLeft?: SvgIconProps['src']
+  iconRight?: SvgIconProps['src']
+} & Pick<BoxProps, 'sx'>
+
+const { classes, selectors } = extendableComponent('DesktopNavBar', [
+  'root',
+  'scroller',
+  'leftWrapper',
+  'rightWrapper',
+  'left',
+  'right',
+] as const)
+
+export function DesktopNavBar(props: MenuTabsProps) {
+  const { children, iconLeft, iconRight, sx = [] } = props
+
+  return (
+    <ScrollerProvider scrollSnapAlign='none'>
+      <Box
+        className={classes.root}
+        sx={[
+          {
+            width: '100%',
+            display: { xs: 'none', md: 'grid' },
+            alignItems: 'center',
+            position: 'relative',
+            pointerEvents: 'all',
+          },
+          ...(Array.isArray(sx) ? sx : [sx]),
+        ]}
+      >
+        <Scroller
+          hideScrollbar
+          sx={(theme) => ({
+            gridArea: `1 / 1 / 1 / 4`,
+            columnGap: theme.spacings.md,
+            padding: `0 ${theme.spacings.sm}`,
+            gridAutoColumns: 'min-content',
+          })}
+          className={classes.scroller}
+        >
+          {children}
+        </Scroller>
+
+        <Box
+          sx={{
+            gridArea: `1 / 1 / 1 / 2`,
+            pointerEvents: 'none',
+            '& > *': { pointerEvents: 'all' },
+          }}
+          className={classes.leftWrapper}
+        >
+          <ScrollerButton
+            sx={{
+              pointerEvents: 'all',
+              boxShadow: 'none',
+              height: 48,
+              borderTopLeftRadius: 0,
+              borderBottomLeftRadius: 0,
+              backgroundColor: 'transparent',
+              backgroundImage: (theme) =>
+                `linear-gradient(to left, rgba(255,255,255,0) 0%, ${theme.palette.background.default} 35%)`,
+            }}
+            direction='left'
+            size='small'
+            className={classes.left}
+          >
+            <SvgIcon src={iconLeft ?? iconChevronLeft} />
+          </ScrollerButton>
+        </Box>
+
+        <Box
+          sx={{
+            gridArea: `1 / 3 / 1 / 4`,
+            pointerEvents: 'none',
+            '& > *': {
+              pointerEvents: 'all',
+            },
+          }}
+          className={classes.rightWrapper}
+        >
+          <ScrollerButton
+            sx={{
+              pointerEvents: 'all',
+              boxShadow: 'none',
+              height: 48,
+              borderTopRightRadius: 0,
+              borderBottomRightRadius: 0,
+              backgroundColor: 'transparent',
+              backgroundImage: (theme) =>
+                `linear-gradient(to right, rgba(255,255,255,0) 0%, ${theme.palette.background.default} 35%)`,
+            }}
+            direction='right'
+            size='small'
+            className={classes.right}
+          >
+            <SvgIcon src={iconRight ?? iconChevronRight} />
+          </ScrollerButton>
+        </Box>
+      </Box>
+    </ScrollerProvider>
+  )
+}
+DesktopNavBar.selectors = selectors

package/LayoutParts/DesktopNavBarItem.tsx

@@ -0,0 +1,44 @@
+import { Box, Link, LinkProps } from '@mui/material'
+import PageLink, { LinkProps as PageLinkProps } from 'next/link'
+import { useRouter } from 'next/router'
+import { extendableComponent } from '../Styles/extendableComponent'
+
+const { classes, selectors } = extendableComponent('DesktopNavItem', ['root', 'line'] as const)
+
+export type DesktopNavItemProps = LinkProps & Pick<PageLinkProps, 'href'>
+
+export function DesktopNavItem(props: DesktopNavItemProps) {
+  const { href, children, sx = [], ...linkProps } = props
+  const active = useRouter().asPath.startsWith(href.toString())
+
+  return (
+    <PageLink href={href} passHref>
+      <Link
+        className={classes.root}
+        variant='h6'
+        color='text.primary'
+        underline='none'
+        {...linkProps}
+        sx={[{ whiteSpace: 'nowrap', paddingTop: '6px' }, ...(Array.isArray(sx) ? sx : [sx])]}
+      >
+        {children}
+        <Box
+          component='span'
+          className={classes.line}
+          sx={{
+            maxWidth: 40,
+            width: '100%',
+            display: 'flex',
+            justifyContent: 'center',
+            height: 2,
+            background: (theme) => theme.palette.primary.main,
+            margin: '0 auto',
+            marginTop: '6px',
+            opacity: active ? 1 : 0,
+          }}
+        />
+      </Link>
+    </PageLink>
+  )
+}
+DesktopNavItem.selectors = selectors

package/{AppShell → LayoutParts}/GlobalHead.tsx

@@ -1,6 +1,5 @@
-import { useTheme } from '@material-ui/core'
+import { useTheme } from '@mui/material'
 import Head from 'next/head'
-import React from 'react'
 
 export type GlobalHeadProps = { name: string }
 

package/LayoutParts/Logo.tsx

@@ -0,0 +1,77 @@
+import { Image, ImageProps } from '@graphcommerce/image'
+import {
+  generateUtilityClass,
+  styled,
+  SxProps,
+  Theme,
+  unstable_composeClasses as composeClasses,
+} from '@mui/material'
+import PageLink from 'next/link'
+import { useRouter } from 'next/router'
+import { forwardRef } from 'react'
+
+/** We're creating some boilerplate */
+const name = 'GcLogo'
+type LogoClassKey = 'logo' | 'parent'
+
+type LogoClasses = Record<LogoClassKey, string>
+type LogoClassProps = { classes?: Partial<LogoClasses> }
+
+const getLogoUtilityClass = (slot: string) => generateUtilityClass(name, slot)
+
+const useUtilityClasses = ({ classes }: LogoClassProps) =>
+  composeClasses({ logo: ['logo'], parent: ['parent'] }, getLogoUtilityClass, classes)
+
+/** Creating styled components */
+const LogoContainer = styled('div', {
+  name,
+  slot: 'parent',
+  overridesResolver: (_props, styles) => styles.parent,
+})(({ theme }) => ({
+  height: '100%',
+  width: 'max-content',
+  display: 'flex',
+  alignItems: 'center',
+  margin: '0 auto',
+  justifyContent: 'center',
+  pointerEvents: 'all',
+  [theme.breakpoints.up('md')]: {
+    display: 'flex',
+    margin: 'unset',
+    justifyContent: 'left',
+  },
+}))
+
+export type LogoProps = {
+  href?: `/${string}`
+  image: ImageProps
+  sx?: SxProps<Theme>
+} & LogoClassProps
+
+export const Logo = forwardRef<HTMLDivElement, LogoProps>((props, ref) => {
+  const { href = '/', image, sx } = props
+  const router = useRouter()
+
+  const classes = useUtilityClasses(props)
+
+  const img = (
+    <Image
+      layout='fixed'
+      loading='eager'
+      {...image}
+      className={`${image.className} ${classes?.logo ?? ''}`}
+    />
+  )
+
+  return router.asPath === '/' ? (
+    <LogoContainer ref={ref} sx={sx} className={classes.parent}>
+      {img}
+    </LogoContainer>
+  ) : (
+    <PageLink href={href} passHref>
+      <LogoContainer ref={ref} as='a' sx={sx} className={classes.parent}>
+        {img}
+      </LogoContainer>
+    </PageLink>
+  )
+})

package/LayoutParts/MenuFab.tsx

@@ -0,0 +1,131 @@
+import { Divider, Fab, ListItem, Menu, styled, Box } from '@mui/material'
+import { m } from 'framer-motion'
+import { useRouter } from 'next/router'
+import React, { useEffect } from 'react'
+import { extendableComponent } from '../Styles/extendableComponent'
+import { responsiveVal } from '../Styles/responsiveVal'
+import { SvgIcon } from '../SvgIcon/SvgIcon'
+import { iconMenu, iconClose } from '../icons'
+import { useFabAnimation } from './useFabAnimation'
+
+const MotionDiv = styled(m.div)({})
+
+export type MenuFabProps = {
+  children?: React.ReactNode
+  secondary?: React.ReactNode
+  search?: React.ReactNode
+  menuIcon?: React.ReactNode
+  closeIcon?: React.ReactNode
+}
+
+const { classes, selectors } = extendableComponent('MenuFab', [
+  'root',
+  'fab',
+  'shadow',
+  'menu',
+] as const)
+
+const fabIconSize = responsiveVal(42, 56) // @todo generalize this
+
+export function MenuFab(props: MenuFabProps) {
+  const { children, secondary, search, menuIcon, closeIcon } = props
+  const router = useRouter()
+  const [openEl, setOpenEl] = React.useState<null | HTMLElement>(null)
+
+  const { opacity, scale, shadowOpacity } = useFabAnimation()
+
+  useEffect(() => {
+    const clear = () => setOpenEl(null)
+    router.events.on('routeChangeStart', clear)
+    return () => router.events.off('routeChangeStart', clear)
+  }, [router])
+
+  return (
+    <Box sx={{ width: fabIconSize, height: fabIconSize }}>
+      <MotionDiv
+        className={classes.root}
+        sx={(theme) => ({
+          [theme.breakpoints.down('md')]: {
+            opacity: '1 !important',
+            transform: 'none !important',
+          },
+        })}
+        style={{ scale, opacity }}
+      >
+        <Fab
+          color='inherit'
+          aria-label='Open Menu'
+          size='medium'
+          onClick={(event) => setOpenEl(event.currentTarget)}
+          sx={(theme) => ({
+            boxShadow: 'none',
+            '&:hover, &:focus': {
+              boxShadow: 'none',
+              background: theme.palette.text.primary,
+            },
+            background: theme.palette.text.primary,
+            width: fabIconSize,
+            height: fabIconSize,
+            pointerEvents: 'all',
+            color: theme.palette.background.paper,
+          })}
+          className={classes.fab}
+        >
+          {closeIcon ?? (
+            <SvgIcon src={iconClose} size='medium' sx={{ display: openEl ? 'block' : 'none' }} />
+          )}
+          {menuIcon ?? (
+            <SvgIcon src={iconMenu} size='medium' sx={{ display: openEl ? 'none' : 'block' }} />
+          )}
+        </Fab>
+        <MotionDiv
+          sx={(theme) => ({
+            pointerEvents: 'none',
+            borderRadius: '99em',
+            position: 'absolute',
+            height: '100%',
+            width: '100%',
+            boxShadow: theme.shadows[6],
+            top: 0,
+            [theme.breakpoints.down('md')]: { opacity: '1 !important' },
+          })}
+          className={classes.shadow}
+          style={{ opacity: shadowOpacity }}
+        />
+
+        <Menu
+          anchorEl={openEl}
+          open={!!openEl}
+          onClose={() => setOpenEl(null)}
+          disableScrollLock
+          transitionDuration={{ appear: 175, enter: 175, exit: 175 }}
+          PaperProps={{
+            sx: (theme) => ({
+              backgroundColor: theme.palette.background.paper,
+              color: theme.palette.text.primary,
+              minWidth: responsiveVal(200, 280),
+              marginTop: '12px',
+              [theme.breakpoints.down('md')]: {
+                marginTop: `calc((${fabIconSize} + 12px) * -1)`,
+              },
+            }),
+          }}
+          className={classes.menu}
+          MenuListProps={{ dense: true }}
+        >
+          {[
+            search ? (
+              <ListItem key='search' dense sx={{ mb: '6px' }}>
+                {search}
+              </ListItem>
+            ) : null,
+            ...React.Children.toArray(children),
+            <Divider key='divider' variant='middle' sx={{ my: '6px' }} />,
+            ...React.Children.toArray(secondary),
+          ]}
+        </Menu>
+      </MotionDiv>
+    </Box>
+  )
+}
+MenuFab.selectors = selectors

package/LayoutParts/MenuFabItem.tsx

@@ -0,0 +1,25 @@
+import { ListItemButton, ListItemButtonProps, ListItemText } from '@mui/material'
+import PageLink, { LinkProps as PageLinkProps } from 'next/link'
+import { useRouter } from 'next/router'
+
+export type MenuFabItemProps = Omit<ListItemButtonProps<'a'>, 'href' | 'button'> &
+  Pick<PageLinkProps, 'href'>
+
+export function MenuFabItem(props: MenuFabItemProps) {
+  const { href, children, sx = [], ...listItemProps } = props
+  const hrefString = href.toString()
+  const { asPath } = useRouter()
+  const active = hrefString === '/' ? asPath === hrefString : asPath.startsWith(hrefString)
+
+  return (
+    <PageLink key={href.toString()} href={href} passHref>
+      <ListItemButton component='a' dense selected={active} {...listItemProps}>
+        <ListItemText
+          sx={[{ typography: 'h4', lineHeight: 1.1 }, ...(Array.isArray(sx) ? sx : [sx])]}
+          disableTypography
+          primary={children}
+        />
+      </ListItemButton>
+    </PageLink>
+  )
+}

package/LayoutParts/MenuFabSecondaryItem.tsx

@@ -0,0 +1,37 @@
+import { ListItemButton, ListItemIcon, ListItemText, SxProps, Theme } from '@mui/material'
+import PageLink from 'next/link'
+import router from 'next/router'
+import React from 'react'
+import { extendableComponent } from '../Styles'
+
+export type FabMenuSecondaryItemProps = {
+  href: string
+  children: React.ReactNode
+  icon: React.ReactNode
+  sx?: SxProps<Theme>
+}
+
+const compName = 'MenuFabSecondaryItem' as const
+const parts = ['root', 'icon', 'text'] as const
+const { classes } = extendableComponent(compName, parts)
+
+export function MenuFabSecondaryItem(props: FabMenuSecondaryItemProps) {
+  const { href, children, icon, sx = [] } = props
+
+  return (
+    <PageLink href={href} passHref>
+      <ListItemButton
+        className={classes.root}
+        sx={[{}, ...(Array.isArray(sx) ? sx : [sx])]}
+        component='a'
+        dense
+        selected={router.asPath.startsWith(href)}
+      >
+        <ListItemIcon className={classes.text} sx={{ paddingRight: '8px', minWidth: 'unset' }}>
+          {icon}
+        </ListItemIcon>
+        <ListItemText className={classes.icon}>{children}</ListItemText>
+      </ListItemButton>
+    </PageLink>
+  )
+}

package/{AppShell/PlaceholderFab/index.tsx → LayoutParts/PlaceholderFab.tsx}

@@ -1,4 +1,4 @@
-import { Fab, FabProps, styled } from '@material-ui/core'
+import { Fab, FabProps, styled } from '@mui/material'
 
 export const PlaceholderFab = styled((props: Omit<FabProps, 'children'>) => (
   <Fab {...props}>

package/LayoutParts/StickyBelowHeader.tsx

@@ -0,0 +1,25 @@
+import { Container } from '@mui/material'
+import React from 'react'
+
+export type StickyBelowHeaderProps = {
+  children: React.ReactNode
+}
+
+/** - Makes the children sticky to the parent container */
+export function StickyBelowHeader(props: StickyBelowHeaderProps) {
+  return (
+    <Container
+      sx={(theme) => ({
+        position: 'sticky',
+        top: { xs: theme.appShell.headerHeightSm, md: `${theme.page.vertical} !important` },
+        zIndex: 96,
+        pointerEvents: 'none',
+        '& > *': {
+          pointerEvents: 'auto',
+        },
+      })}
+      maxWidth={false}
+      {...props}
+    />
+  )
+}

package/LayoutParts/index.ts

@@ -0,0 +1,12 @@
+export * from './DesktopHeaderBadge'
+export * from './DesktopNavActions'
+export * from './DesktopNavBar'
+export * from './DesktopNavBarItem'
+export * from './GlobalHead'
+export * from './Logo'
+export * from './MenuFab'
+export * from './MenuFabItem'
+export * from './MenuFabSecondaryItem'
+export * from './PlaceholderFab'
+export * from './StickyBelowHeader'
+export * from './useFabAnimation'

package/Page/CssAndFramerMotionProvider.tsx

@@ -0,0 +1,21 @@
+import { LazyMotion } from 'framer-motion'
+import { EmotionProvider } from '../Styles'
+
+export type GraphCommerceProviderProps = {
+  children: React.ReactNode
+}
+
+/**
+ * For [@emotion/core](https://emotion.sh/docs/introduction) and
+ * [framer-motion](https://www.framer.com/motion/) to work they need to have a provider.
+ *
+ * - Wrapps the app to lazily load framer-motion.
+ * - Wrapps the app to have Emotion CSS styles
+ */
+export function CssAndFramerMotionProvider({ children }: GraphCommerceProviderProps) {
+  return (
+    <LazyMotion features={async () => (await import('./framerFeatures')).default} strict>
+      <EmotionProvider>{children}</EmotionProvider>
+    </LazyMotion>
+  )
+}

package/Page/index.ts

@@ -0,0 +1,2 @@
+export * from './CssAndFramerMotionProvider'
+export * from './types'

package/Page/types.ts

@@ -1,20 +1,14 @@
 import { ParsedUrlQuery } from 'querystring'
-import { NormalizedCacheObject } from '@apollo/client'
+import { NormalizedCacheObject } from '@graphcommerce/graphql'
 import { UpPage } from '@graphcommerce/framer-next-pages/types'
 import { GetStaticProps as GetStaticPropsNext } from 'next'
-import { AppProps as NextAppProps } from 'next/app'
 
 type AnyObj = Record<string, unknown>
 
-type ApolloStateProps = { apolloState: NormalizedCacheObject; up?: UpPage | null }
+export type ApolloStateProps = { apolloState: NormalizedCacheObject; up?: UpPage | null }
 
 export type GetStaticProps<
   PL extends AnyObj,
   P extends AnyObj = AnyObj,
   Q extends ParsedUrlQuery = ParsedUrlQuery,
 > = GetStaticPropsNext<P & Omit<PL, 'children'> & ApolloStateProps, Q>
-
-/** Used by _app */
-export type AppProps = Omit<NextAppProps, 'pageProps'> & {
-  pageProps: ApolloStateProps
-}

package/PageLoadIndicator/index.tsx

@@ -1,46 +1,41 @@
-import { LinearProgress, makeStyles, Fade } from '@material-ui/core'
-import zIndex from '@material-ui/core/styles/zIndex'
+import { LinearProgress, Fade } from '@mui/material'
 import { useRouter } from 'next/router'
-import React, { useEffect, useState } from 'react'
+import { useEffect, useState } from 'react'
 
-const useStyles = makeStyles(
-  {
-    progress: {
-      position: 'fixed',
-      width: '100%',
-      top: 0,
-      height: 3,
-      marginBottom: -3,
-      zIndex: zIndex.tooltip,
-    },
-  },
-  { name: 'PageLoadIndicator' },
-)
-
-function PageLoadIndicator() {
-  const router = useRouter()
-  const classes = useStyles()
+/**
+ * Creates a [LinearProgress](https://mui.com/components/progress/#linear) animation when the route
+ * is about to change until it has changed.
+ */
+export function PageLoadIndicator() {
+  const { events } = useRouter()
   const [loading, setLoading] = useState<boolean>(false)
 
   useEffect(() => {
     const show = () => setLoading(true)
     const hide = () => setLoading(false)
-    router.events.on('routeChangeStart', show)
-    router.events.on('routeChangeComplete', hide)
-    router.events.on('routeChangeError', hide)
+    events.on('routeChangeStart', show)
+    events.on('routeChangeComplete', hide)
+    events.on('routeChangeError', hide)
 
     return () => {
-      router.events.off('routeChangeStart', show)
-      router.events.off('routeChangeComplete', hide)
-      router.events.off('routeChangeError', hide)
+      events.off('routeChangeStart', show)
+      events.off('routeChangeComplete', hide)
+      events.off('routeChangeError', hide)
     }
-  }, [router.events])
+  }, [events])
 
   return (
     <Fade in={loading}>
-      <LinearProgress className={classes.progress} />
+      <LinearProgress
+        sx={{
+          position: 'fixed',
+          width: '100%',
+          top: 0,
+          height: 3,
+          marginBottom: '-3px',
+          zIndex: 'tooltip',
+        }}
+      />
     </Fade>
   )
 }
-
-export default PageLoadIndicator

package/PageMeta/index.tsx

@@ -22,7 +22,7 @@ export type PageMetaProps = {
   metaRobots?: MetaRobotsAll | MetaRobots[]
 }
 
-export default function PageMeta(props: PageMetaProps) {
+export function PageMeta(props: PageMetaProps) {
   const { active } = usePageContext()
   const { title, canonical, metaDescription, metaRobots = ['all'] } = props