@graphcommerce/next-ui 3.25.3 → 4.1.0

package/AppShell/DesktopNavBar.tsx

@@ -1,158 +0,0 @@
-import { Scroller, ScrollerButton, ScrollerProvider } from '@graphcommerce/framer-scroller'
-import { Link, LinkProps as MuiLinkProps, makeStyles, Theme } from '@material-ui/core'
-import clsx from 'clsx'
-import { m } from 'framer-motion'
-import PageLink from 'next/link'
-import { useRouter } from 'next/router'
-import React from 'react'
-import { UseStyles } from '../Styles'
-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: 'grid',
-      columnGap: 40,
-      padding: '0 40px',
-      minHeight: 40,
-      gridAutoColumns: 'min-content',
-    },
-    prevNextBtnWrapper: {
-      position: 'absolute',
-      top: 0,
-    },
-    left: {
-      left: 0,
-    },
-    right: {
-      right: 0,
-    },
-    prevNextBtn: {
-      pointerEvents: 'all',
-      background: theme.palette.background.default,
-      boxShadow: 'none',
-      height: 48,
-      [theme.breakpoints.down('sm')]: {
-        display: 'none',
-      },
-    },
-    prevBtn: {
-      borderTopLeftRadius: 0,
-      borderBottomLeftRadius: 0,
-    },
-    nextBtn: {
-      borderTopRightRadius: 0,
-      borderBottomRightRadius: 0,
-    },
-    link: {
-      whiteSpace: 'nowrap',
-      color: theme.palette.text.primary,
-      '&:hover': {
-        textDecoration: 'none',
-      },
-      fontWeight: theme.typography.fontWeightBold,
-      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 &
-  UseStyles<typeof useStyles> & {
-    LinkProps?: MuiLinkProps
-    iconScrollerBtnLeft?: React.ReactNode
-    iconScrollerBtnRight?: React.ReactNode
-  }
-
-export default function DesktopNavBar(props: MenuTabsProps) {
-  const { menu, LinkProps, iconScrollerBtnLeft, iconScrollerBtnRight } = props
-  const classes = useStyles(props)
-  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
-                variant='subtitle1'
-                {...LinkProps}
-                className={clsx(classes.link, LinkProps?.className)}
-              >
-                {children}
-                <div
-                  className={clsx(
-                    classes.line,
-                    router.asPath.startsWith(href.toString()) && classes.lineShow,
-                  )}
-                />
-              </Link>
-            </PageLink>
-          ))}
-        </Scroller>
-
-        <m.div className={clsx(classes.prevNextBtnWrapper, classes.left)}>
-          <ScrollerButton
-            direction='left'
-            size='small'
-            classes={{ root: clsx(classes.prevNextBtn, classes.prevBtn) }}
-          >
-            {iconScrollerBtnLeft ?? <SvgImageSimple src={iconChevronLeft} />}
-          </ScrollerButton>
-        </m.div>
-
-        <m.div className={clsx(classes.prevNextBtnWrapper, classes.right)}>
-          <ScrollerButton
-            direction='right'
-            size='small'
-            classes={{ root: clsx(classes.prevNextBtn, classes.nextBtn) }}
-          >
-            {iconScrollerBtnRight ?? <SvgImageSimple src={iconChevronRight} />}
-          </ScrollerButton>
-        </m.div>
-      </div>
-
-      {/* <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> */}
-    </ScrollerProvider>
-  )
-}

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],
-      )}
-    />
-  )
-})