@graphcommerce/next-ui 3.25.3 → 4.0.0

package/AppShell/Logo.tsx

@@ -1,46 +0,0 @@
-import { Image, ImageProps } from '@graphcommerce/image'
-import { makeStyles, Theme } from '@material-ui/core'
-import PageLink from 'next/link'
-import { useRouter } from 'next/router'
-import React from 'react'
-import { UseStyles } from '../Styles'
-
-const useStyles = makeStyles(
-  (theme: Theme) => ({
-    logo: {},
-    parent: {
-      height: '100%',
-      width: 'max-content',
-      display: 'flex',
-      alignItems: 'center',
-      margin: '0 auto',
-      justifyContent: 'center',
-      [theme.breakpoints.up('md')]: {
-        display: 'flex',
-        margin: 'unset',
-        justifyContent: 'left',
-      },
-    },
-  }),
-  { name: 'Logo' },
-)
-
-export type LogoProps = { href?: `/${string}`; image: ImageProps } & UseStyles<typeof useStyles>
-
-export default function Logo(props: LogoProps) {
-  const { href, image } = props
-  const router = useRouter()
-  const classes = useStyles(props)
-
-  return router.asPath.split('?')[0] === '/' ? (
-    <div className={classes.parent}>
-      <Image layout='fixed' loading='eager' {...image} className={classes.logo} />
-    </div>
-  ) : (
-    <PageLink href={href ?? '/'} passHref>
-      <a className={classes.parent} aria-label='Logo'>
-        <Image layout='fixed' loading='eager' {...image} className={classes.logo} />
-      </a>
-    </PageLink>
-  )
-}

package/AppShell/Menu.tsx

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

package/AppShell/MenuFab.tsx

@@ -1,162 +0,0 @@
-import {
-  Divider,
-  Fab,
-  List,
-  ListItem,
-  ListItemText,
-  makeStyles,
-  Menu,
-  Theme,
-} from '@material-ui/core'
-import { m } from 'framer-motion'
-import PageLink from 'next/link'
-import { useRouter } from 'next/router'
-import React, { useEffect } from 'react'
-import { UseStyles } from '../Styles'
-import { responsiveVal } from '../Styles/responsiveVal'
-import SvgImageSimple from '../SvgImage/SvgImageSimple'
-import { iconMenu, iconClose } from '../icons'
-import { MenuProps } from './Menu'
-import { useFabAnimation } from './useFabAnimation'
-
-const useStyles = makeStyles(
-  (theme: Theme) => ({
-    menuWrapper: {
-      left: theme.page.horizontal,
-      [theme.breakpoints.down('sm')]: {
-        transform: 'none !important',
-        opacity: '1 !important',
-      },
-    },
-    menuFab: {
-      boxShadow: 'none',
-      '&:hover, &:focus': {
-        boxShadow: 'none',
-        background: theme.palette.text.primary,
-      },
-      background: theme.palette.text.primary,
-      width: responsiveVal(42, 56),
-      height: responsiveVal(42, 56),
-      pointerEvents: 'all',
-      color: theme.palette.background.paper,
-    },
-    shadow: {
-      pointerEvents: 'none',
-      borderRadius: '99em',
-      position: 'absolute',
-      height: '100%',
-      width: '100%',
-      boxShadow: theme.shadows[6],
-      top: 0,
-      [theme.breakpoints.down('sm')]: {
-        opacity: '1 !important',
-      },
-    },
-    menu: {
-      backgroundColor: theme.palette.background.paper,
-      color: theme.palette.text.primary,
-      minWidth: responsiveVal(200, 280),
-      marginTop: `calc(${responsiveVal(42, 56)} + 3px)`,
-      [theme.breakpoints.down('sm')]: {
-        marginTop: `calc((${responsiveVal(42, 56)} + 12px) * -1)`,
-      },
-    },
-    menuItemText: {
-      ...theme.typography.h4,
-      lineHeight: 1.1,
-    },
-    menuItem: {},
-  }),
-  { name: 'Menu' },
-)
-
-export type MenuFabProps = MenuProps &
-  UseStyles<typeof useStyles> & {
-    children?: React.ReactNode
-    search?: React.ReactNode
-    menuIcon?: React.ReactNode
-    closeIcon?: React.ReactNode
-  }
-
-export default function MenuFab(props: MenuFabProps) {
-  const { menu, children, search, menuIcon, closeIcon } = props
-  const classes = useStyles(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 (
-    <m.div className={classes.menuWrapper} style={{ scale, opacity }}>
-      <Fab
-        color='inherit'
-        aria-label='Open Menu'
-        size='medium'
-        onClick={(event) => setOpenEl(event.currentTarget)}
-        className={classes.menuFab}
-      >
-        {closeIcon ?? (
-          <SvgImageSimple src={iconClose} inverted style={{ display: openEl ? 'block' : 'none' }} />
-        )}
-        {menuIcon ?? (
-          <SvgImageSimple src={iconMenu} inverted style={{ display: openEl ? 'none' : 'block' }} />
-        )}
-      </Fab>
-      <m.div className={classes.shadow} style={{ opacity: shadowOpacity }} />
-
-      <Menu
-        anchorEl={openEl}
-        open={!!openEl}
-        onClose={() => setOpenEl(null)}
-        classes={{ paper: classes.menu }}
-        disableScrollLock
-        transitionDuration={{
-          appear: 175,
-          enter: 175,
-          exit: 175,
-        }}
-      >
-        {search && (
-          <List>
-            <ListItem dense>{search}</ListItem>
-          </List>
-        )}
-        <List>
-          <PageLink href='/' passHref>
-            <ListItem
-              button
-              dense
-              selected={router.asPath.split('?')[0] === '/'}
-              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

@@ -1,32 +0,0 @@
-import { ListItem, ListItemIcon, ListItemText, makeStyles } from '@material-ui/core'
-import PageLink from 'next/link'
-import router from 'next/router'
-import React from 'react'
-
-const useStyles = makeStyles(
-  {
-    listItemText: {},
-    icon: { minWidth: 30 },
-  },
-  { name: 'FabMenuSecondaryItem' },
-)
-
-export type FabMenuSecondaryItemProps = {
-  href: string
-  children: React.ReactNode
-  icon: React.ReactNode
-}
-
-export 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/index.ts

@@ -1,15 +0,0 @@
-export { default as AppShellSticky } from './AppShellSticky'
-export { default as DesktopNavActions } from './DesktopNavActions'
-
-export * from './DesktopNavBar'
-export { default as DesktopNavBar } from './DesktopNavBar'
-
-export { default as Logo } from './Logo'
-export * from './Logo'
-export * from './Menu'
-export * from './MenuFab'
-export { default as MenuFab } from './MenuFab'
-export * from './MenuFabSecondaryItem'
-export * from './PlaceholderFab'
-export * from './GlobalHead'
-export * from './useFabAnimation'

package/AspectRatioContainer/index.tsx

@@ -1,27 +0,0 @@
-import { makeStyles } from '@material-ui/core'
-import React from 'react'
-import { UseStyles } from '../Styles'
-
-const useStyles = makeStyles({
-  root: ({ width, height }: Props) => ({
-    position: `relative`,
-    paddingTop: `calc(100% / ${width} * ${height})`,
-    '& img, & video': {
-      position: 'absolute',
-      left: 0,
-      top: 0,
-      width: `100%`,
-      height: `auto`,
-    },
-  }),
-})
-
-export type Props = { width: number; height: number }
-export type AspectRatioContainerProps = Props & UseStyles<typeof useStyles>
-
-const AspectRatioContainer: React.FC<AspectRatioContainerProps> = ({ children, ...styleProps }) => {
-  const classes = useStyles(styleProps)
-  return <div className={classes.root}>{children}</div>
-}
-
-export default AspectRatioContainer

package/Footer/SocialIcon.tsx

@@ -1,23 +0,0 @@
-import { makeStyles, Theme } from '@material-ui/core'
-import React from 'react'
-import { UseStyles } from '../Styles'
-import SvgImage, { SvgImageProps } from '../SvgImage'
-
-const useStyles = makeStyles(
-  (theme: Theme) => ({
-    root: {
-      filter: theme.palette.type === 'light' ? undefined : 'brightness(1) invert(1)',
-    },
-  }),
-  {
-    name: 'SocialIcon',
-  },
-)
-
-type SocialIconProps = UseStyles<typeof useStyles> & SvgImageProps
-
-export function SocialIcon(props: SocialIconProps) {
-  const classes = useStyles(props)
-
-  return <SvgImage {...props} className={classes.root} />
-}

package/Form/index.tsx

@@ -1,67 +0,0 @@
-import { darken, lighten, makeStyles, Theme } from '@material-ui/core'
-import clsx from 'clsx'
-import React from 'react'
-import { UseStyles } from '../Styles'
-import { responsiveVal } from '../Styles/responsiveVal'
-
-const useStyles = makeStyles(
-  (theme: Theme) => ({
-    root: {
-      display: 'grid',
-      alignItems: 'center',
-      padding: `${theme.spacings.xxs} 0`,
-    },
-    secondary: {
-      background: theme.palette.secondary.light,
-    },
-    default: {
-      background:
-        theme.palette.type === 'light'
-          ? darken(theme.palette.background.default, 0.03)
-          : lighten(theme.palette.background.default, 0.1),
-    },
-    contained: {
-      padding: `${theme.spacings.xxs} ${theme.spacings.sm}`,
-      // paddingTop: theme.spacings.md,
-      overflow: 'hidden',
-      borderRadius: responsiveVal(theme.shape.borderRadius * 3, theme.shape.borderRadius * 4),
-    },
-  }),
-  { name: 'Form' },
-)
-
-export type BaseFormProps = {
-  contained?: boolean
-  background?: 'secondary' | 'default'
-  children: React.ReactNode
-} & UseStyles<typeof useStyles>
-
-export type FormFormProps = BaseFormProps & JSX.IntrinsicElements['form']
-
-export const Form = React.forwardRef<HTMLFormElement, FormFormProps>((props, ref) => {
-  const classes = useStyles(props)
-  const { contained, background, ...formProps } = props
-
-  return (
-    <form ref={ref} {...formProps} className={clsx(classes.root, contained && classes.contained)} />
-  )
-})
-
-export type DivFormProps = BaseFormProps & JSX.IntrinsicElements['div']
-
-export const FormDiv = React.forwardRef<HTMLDivElement, DivFormProps>((props, ref) => {
-  const classes = useStyles(props)
-  const { contained, background = 'default', classes: _classes, ...formProps } = props
-
-  return (
-    <div
-      ref={ref}
-      {...formProps}
-      className={clsx(
-        classes.root,
-        contained && classes.contained,
-        contained && classes[background],
-      )}
-    />
-  )
-})

package/FramerScroller/components/SidebarGallery.tsx

@@ -1,317 +0,0 @@
-import { usePrevPageRouter } from '@graphcommerce/framer-next-pages/hooks/usePrevPageRouter'
-import {
-  MotionImageAspect,
-  MotionImageAspectProps,
-  Scroller,
-  ScrollerButton,
-  ScrollerDots,
-  ScrollerProvider,
-} from '@graphcommerce/framer-scroller'
-import { clientSize, useMotionValueValue } from '@graphcommerce/framer-utils'
-import { Fab, makeStyles, Theme, useTheme, alpha } from '@material-ui/core'
-import { m, useDomEvent, useMotionValue } from 'framer-motion'
-import { useRouter } from 'next/router'
-import React, { useEffect, useRef } from 'react'
-import Row from '../../Row'
-import { UseStyles } from '../../Styles'
-import { classesPicker } from '../../Styles/classesPicker'
-import { responsiveVal } from '../../Styles/responsiveVal'
-import SvgImageSimple from '../../SvgImage/SvgImageSimple'
-import { iconChevronLeft, iconChevronRight, iconFullscreen, iconFullscreenExit } from '../../icons'
-
-type StyleProps = {
-  aspectRatio: [number, number]
-  clientHeight: number
-  classes?: Record<string, unknown>
-}
-
-const useStyles = makeStyles(
-  (theme: Theme) => ({
-    root: {
-      willChange: 'transform',
-      display: 'grid',
-      [theme.breakpoints.up('md')]: {
-        gridTemplateColumns: '1fr auto',
-      },
-      background:
-        theme.palette.type === 'light'
-          ? theme.palette.background.image
-          : theme.palette.background.paper,
-      paddingRight: `calc((100% - ${theme.breakpoints.values.lg}px) / 2)`,
-    },
-    rootZoomed: {
-      position: 'relative',
-      zIndex: theme.zIndex.modal,
-      marginTop: `calc(${theme.appShell.headerHeightSm} * -1)`,
-      [theme.breakpoints.up('md')]: {
-        marginTop: `calc(${theme.appShell.headerHeightMd} * -1  - ${theme.spacings.lg})`,
-      },
-      paddingRight: 0,
-    },
-    scrollerContainer: ({ aspectRatio: [width, height] }: StyleProps) => {
-      const headerHeight = `${theme.appShell.headerHeightSm} - ${theme.spacings.sm} * 2`
-      const galleryMargin = theme.spacings.lg
-      const extraSpacing = theme.spacings.md
-
-      const maxHeight = `calc(100vh - ${headerHeight} - ${galleryMargin} - ${extraSpacing})`
-      const ratio = `calc(${height} / ${width} * 100%)`
-
-      return {
-        willChange: 'transform',
-        height: 0, // https://stackoverflow.com/questions/44770074/css-grid-row-height-safari-bug
-        backgroundColor: theme.palette.background.image,
-        position: 'relative',
-        minHeight: '100%',
-        paddingTop: `min(${ratio}, ${maxHeight})`,
-        [theme.breakpoints.down('sm')]: {
-          width: '100vw',
-        },
-      }
-    },
-    scrollerContainerZoomed: ({ clientHeight }: StyleProps) => ({
-      paddingTop: clientHeight,
-    }),
-    scroller: {
-      willChange: 'transform',
-      position: 'absolute',
-      top: 0,
-      width: '100%',
-      height: '100%',
-      gridAutoColumns: `100%`,
-      gridTemplateRows: `100%`,
-      cursor: 'zoom-in',
-    },
-    scrollerZoomed: ({ clientHeight }: StyleProps) => ({
-      height: clientHeight,
-      cursor: 'inherit',
-    }),
-    sidebarWrapper: {
-      boxSizing: 'content-box',
-      display: 'grid',
-      justifyItems: 'start',
-      alignContent: 'center',
-      position: 'relative',
-      [theme.breakpoints.up('md')]: {
-        width: `calc(${responsiveVal(300, 500, theme.breakpoints.values.lg)} + ${
-          theme.page.horizontal
-        } * 2)`,
-      },
-    },
-    sidebarWrapperZoomed: {
-      [theme.breakpoints.up('md')]: {
-        marginLeft: `calc((${responsiveVal(300, 500, theme.breakpoints.values.lg)} + ${
-          theme.page.horizontal
-        } * 2) * -1)`,
-        left: `calc(${responsiveVal(300, 500, theme.breakpoints.values.lg)} + ${
-          theme.page.horizontal
-        } * 2)`,
-      },
-    },
-    sidebar: {
-      boxSizing: 'border-box',
-      width: '100%',
-      padding: `${theme.spacings.lg} ${theme.page.horizontal}`,
-      [theme.breakpoints.up('md')]: {
-        paddingLeft: theme.spacings.lg,
-      },
-    },
-    bottomCenter: {
-      display: 'grid',
-      gridAutoFlow: 'column',
-      gap: theme.spacings.xxs,
-      position: 'absolute',
-      bottom: theme.spacings.xxs,
-      justifyContent: 'center',
-      width: '100%',
-      pointerEvents: 'none',
-      '& > *': {
-        pointerEvents: 'all',
-      },
-    },
-    sliderButtons: {
-      [theme.breakpoints.down('sm')]: {
-        display: 'none',
-      },
-    },
-    toggleIcon: {
-      boxShadow: theme.shadows[6],
-    },
-    topRight: {
-      display: 'grid',
-      gridAutoFlow: 'column',
-      top: theme.spacings.sm,
-      gap: theme.spacings.xxs,
-      position: 'absolute',
-      right: theme.spacings.sm,
-    },
-    centerLeft: {
-      display: 'grid',
-      gridAutoFlow: 'row',
-      gap: theme.spacings.xxs,
-      position: 'absolute',
-      left: theme.spacings.sm,
-      top: `calc(50% - 28px)`,
-    },
-    centerRight: {
-      display: 'grid',
-      gap: theme.spacings.xxs,
-      position: 'absolute',
-      right: theme.spacings.sm,
-      top: `calc(50% - 28px)`,
-    },
-    dots: {
-      background: alpha(theme.palette.background.paper, 1),
-      boxShadow: theme.shadows[6],
-    },
-  }),
-  { name: 'SidebarGallery' },
-)
-
-export type SidebarGalleryProps = {
-  sidebar: React.ReactNode
-  images: MotionImageAspectProps[]
-  aspectRatio?: [number, number]
-  routeHash?: string
-} & UseStyles<typeof useStyles>
-
-export default function SidebarGallery(props: SidebarGalleryProps) {
-  const {
-    sidebar,
-    images,
-    aspectRatio = [1, 1],
-    routeHash = 'gallery',
-    classes: classesBase,
-  } = props
-
-  const router = useRouter()
-  const prevRoute = usePrevPageRouter()
-  const clientHeight = useMotionValueValue(clientSize.y, (y) => y)
-  const classes = useStyles({ clientHeight, aspectRatio, classes: classesBase })
-
-  const route = `#${routeHash}`
-  // We're using the URL to manage the state of the gallery.
-  const zoomed = router.asPath.endsWith(route)
-
-  // cleanup if someone enters the page with #gallery
-  useEffect(() => {
-    if (!prevRoute?.pathname && zoomed) {
-      // eslint-disable-next-line @typescript-eslint/no-floating-promises
-      router.replace(router.asPath.replace(route, ''))
-    }
-  }, [prevRoute?.pathname, route, router, zoomed])
-
-  const toggle = () => {
-    if (!zoomed) {
-      // eslint-disable-next-line @typescript-eslint/no-floating-promises
-      router.push(route, undefined, { shallow: true })
-      document.body.style.overflow = 'hidden'
-      window.scrollTo({ top: 0, behavior: 'smooth' })
-    } else {
-      router.back()
-    }
-  }
-
-  const className = classesPicker(classes, { zoomed })
-  const theme = useTheme()
-  const windowRef = useRef(typeof window !== 'undefined' ? window : null)
-
-  const handleEscapeKey = (e: KeyboardEvent | Event) => {
-    if (zoomed && (e as KeyboardEvent)?.key === 'Escape') toggle()
-  }
-
-  const dragStart = useMotionValue<number>(0)
-  const onMouseDownScroller: React.MouseEventHandler<HTMLDivElement> = (e) => {
-    if (dragStart.get() === e.clientX) return
-    dragStart.set(e.clientX)
-  }
-  const onMouseUpScroller: React.MouseEventHandler<HTMLDivElement> = (e) => {
-    const currentDragLoc = e.clientX
-    if (Math.abs(currentDragLoc - dragStart.get()) < 8) toggle()
-  }
-
-  useDomEvent(windowRef, 'keyup', handleEscapeKey, { passive: true })
-
-  return (
-    <ScrollerProvider scrollSnapAlign='center'>
-      <Row maxWidth={false} disableGutters>
-        <m.div layout {...className('root')}>
-          <m.div
-            layout
-            {...className('scrollerContainer')}
-            onLayoutAnimationComplete={() => {
-              if (!zoomed) document.body.style.overflow = ''
-            }}
-          >
-            <Scroller
-              {...className('scroller')}
-              hideScrollbar
-              onMouseDown={onMouseDownScroller}
-              onMouseUp={onMouseUpScroller}
-            >
-              {images.map((image, idx) => (
-                <MotionImageAspect
-                  key={typeof image.src === 'string' ? image.src : idx}
-                  layout
-                  src={image.src}
-                  width={image.width}
-                  height={image.height}
-                  loading={idx === 0 ? 'eager' : 'lazy'}
-                  sizes={{
-                    0: '100vw',
-                    [theme.breakpoints.values.md]: zoomed ? '100vw' : '60vw',
-                  }}
-                  alt={image.alt || `Product Image ${idx}` || undefined}
-                  dontReportWronglySizedImages
-                />
-              ))}
-            </Scroller>
-            <m.div layout className={classes.topRight}>
-              <Fab
-                size='small'
-                className={classes.toggleIcon}
-                onMouseUp={toggle}
-                aria-label='Toggle Fullscreen'
-              >
-                {!zoomed ? (
-                  <SvgImageSimple src={iconFullscreen} />
-                ) : (
-                  <SvgImageSimple src={iconFullscreenExit} />
-                )}
-              </Fab>
-            </m.div>
-            <div className={classes.centerLeft}>
-              <ScrollerButton
-                layout
-                direction='left'
-                size='small'
-                className={classes.sliderButtons}
-              >
-                <SvgImageSimple src={iconChevronLeft} />
-              </ScrollerButton>
-            </div>
-            <div className={classes.centerRight}>
-              <ScrollerButton
-                layout
-                direction='right'
-                size='small'
-                className={classes.sliderButtons}
-              >
-                <SvgImageSimple src={iconChevronRight} />
-              </ScrollerButton>
-            </div>
-
-            <div className={classes.bottomCenter}>
-              <ScrollerDots layout classes={{ dots: classes.dots }} />
-            </div>
-          </m.div>
-
-          <div {...className('sidebarWrapper')}>
-            <m.div layout {...className('sidebar')}>
-              {sidebar}
-            </m.div>
-          </div>
-        </m.div>
-      </Row>
-    </ScrollerProvider>
-  )
-}