@graphcommerce/next-ui 3.25.3 → 4.1.0

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>
-  )
-}

package/FramerScroller/components/SidebarSlider.tsx

@@ -1,97 +0,0 @@
-import {
-  Scroller,
-  ScrollerButton,
-  ScrollerPageCounter,
-  ScrollerProvider,
-} from '@graphcommerce/framer-scroller'
-import { Theme, makeStyles } from '@material-ui/core'
-import React, { ReactNode } from 'react'
-import Row from '../../Row'
-import { UseStyles } from '../../Styles'
-import { responsiveVal } from '../../Styles/responsiveVal'
-import SvgImageSimple from '../../SvgImage/SvgImageSimple'
-import { iconChevronLeft, iconChevronRight } from '../../icons'
-
-const useStyles = makeStyles(
-  (theme: Theme) => ({
-    root: {
-      display: 'grid',
-      gridTemplateColumns: 'minmax(150px, 25%) 1fr',
-      maxWidth: '100%',
-    },
-    sidebar: {
-      display: 'grid',
-      alignContent: 'space-between',
-      padding: `0 ${theme.spacings.lg} 0 ${theme.page.horizontal}`,
-    },
-    scrollerContainer: {
-      position: 'relative',
-      minWidth: 1,
-    },
-    scroller: {
-      gridColumnGap: theme.spacings.md,
-      gridRowGap: theme.spacings.lg,
-      paddingRight: theme.page.horizontal,
-      gridAutoColumns: responsiveVal(200, 400),
-    },
-    sliderButtons: {
-      [theme.breakpoints.down('sm')]: {
-        display: 'none',
-      },
-    },
-    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)`,
-    },
-  }),
-  { name: 'SidebarSlider' },
-)
-
-export type SidebarSliderProps = { children: ReactNode; sidebar: ReactNode } & UseStyles<
-  typeof useStyles
->
-
-export default function SidebarSlider(props: SidebarSliderProps) {
-  const { children, sidebar } = props
-  const classes = useStyles(props)
-
-  return (
-    <Row maxWidth={false} disableGutters>
-      <ScrollerProvider scrollSnapAlign='start'>
-        <div className={classes.root}>
-          <div className={classes.sidebar}>
-            <div>{sidebar}</div>
-            <ScrollerPageCounter />
-          </div>
-
-          <div className={classes.scrollerContainer}>
-            <Scroller className={classes.scroller} hideScrollbar>
-              {children}
-            </Scroller>
-            <div className={classes.centerLeft}>
-              <ScrollerButton direction='left' className={classes.sliderButtons}>
-                <SvgImageSimple src={iconChevronLeft} />
-              </ScrollerButton>
-            </div>
-            <div className={classes.centerRight}>
-              <ScrollerButton direction='right' className={classes.sliderButtons}>
-                <SvgImageSimple src={iconChevronRight} />
-              </ScrollerButton>
-            </div>
-          </div>
-        </div>
-      </ScrollerProvider>
-    </Row>
-  )
-}

package/Page/App.tsx

@@ -1,17 +0,0 @@
-import { FramerNextPages } from '@graphcommerce/framer-next-pages'
-import { LazyMotion } from 'framer-motion'
-import { AppPropsType } from 'next/dist/shared/lib/utils'
-import React, { useEffect } from 'react'
-import PageLoadIndicator from '../PageLoadIndicator'
-import { AppProps } from './types'
-
-export default function App(props: AppProps & AppPropsType) {
-  useEffect(() => document.getElementById('jss-server-side')?.remove())
-
-  return (
-    <LazyMotion features={async () => (await import('./framerFeatures')).default} strict>
-      <PageLoadIndicator />
-      <FramerNextPages {...props} />
-    </LazyMotion>
-  )
-}

package/Page/Document.tsx

@@ -1,24 +0,0 @@
-import { ServerStyleSheets } from '@material-ui/core/styles'
-// eslint-disable-next-line @next/next/no-document-import-in-page
-import NextDocument, { DocumentContext, DocumentInitialProps } from 'next/document'
-import React from 'react'
-
-export default class Document extends NextDocument {
-  static getInitialProps = async (ctx: DocumentContext): Promise<DocumentInitialProps> => {
-    const sheets = new ServerStyleSheets()
-    const originalRenderPage = ctx.renderPage
-
-    ctx.renderPage = () =>
-      originalRenderPage({
-        enhanceApp: (App) => (props) => sheets.collect(<App {...props} />),
-      })
-
-    const initialProps = await NextDocument.getInitialProps(ctx)
-
-    return {
-      ...initialProps,
-      // Styles fragment is rendered after the app and page rendering finish.
-      styles: [...React.Children.toArray(initialProps.styles), sheets.getStyleElement()],
-    }
-  }
-}

package/StyledBadge/index.tsx

@@ -1,20 +0,0 @@
-import { Badge, withStyles } from '@material-ui/core'
-
-const StyledBadge = withStyles((theme) => ({
-  colorError: {},
-  badge: {
-    ...theme.typography.caption,
-    right: 6,
-    top: 6,
-    padding: 3,
-    color: '#FFF',
-    borderRadius: '100%',
-    [theme.breakpoints.up('md')]: {
-      padding: 6,
-      right: 8,
-      top: 8,
-    },
-  },
-}))(Badge)
-
-export default StyledBadge

package/Styles/classesPicker.ts

@@ -1,41 +0,0 @@
-import { capitalize } from '@material-ui/core'
-import clsx from 'clsx'
-
-/**
- * This will pick classNames from the classes object based on the given value object.sf
- *
- * Example:
- *
- * ```tsx
- * const classes = makeStyles({
- *   root: {},
- *   rootColorRed: { color: 'red' }
- *   rootFloating: { display: 'inline-block' }
- * })
- *
- * function MyComponent() {
- *   const classes = useStyles(props)
- *   const classNames = pickClasses(classes, { color: 'red', floating: true })
- *
- *   return <div {...className('root')}>Hello</div>
- * }
- * ```
- */
-export function classesPicker<K extends string>(
-  classes: Record<string, string>,
-  values: Record<string, boolean | string | undefined>,
-) {
-  return (className: K, addClassName?: string) => {
-    const mapped: Record<string, string> = Object.fromEntries(
-      Object.entries(values)
-        .map(([key, value]) =>
-          typeof value === 'boolean' || typeof value === 'undefined'
-            ? [classes[`${className}${capitalize(key)}`], !!value]
-            : [classes[`${className}${capitalize(key)}${capitalize(value)}`], true],
-        )
-        .filter((v) => !!v[0] && v[1]),
-    )
-
-    return { className: clsx(classes[className], mapped, addClassName) }
-  }
-}

package/SvgImage/SvgImageSimple.tsx

@@ -1,100 +0,0 @@
-import { ImageProps, isStaticImport, isStaticRequire } from '@graphcommerce/image'
-import { makeStyles, capitalize } from '@material-ui/core'
-import clsx from 'clsx'
-import { forwardRef } from 'react'
-import { responsiveVal } from '../Styles/responsiveVal'
-
-export type SvgImageShade = 'muted' | 'default' | 'inverted'
-
-const useStyles = makeStyles(
-  {
-    image: {
-      userSelect: 'none',
-      width: responsiveVal(22, 24),
-      height: responsiveVal(22, 24),
-      strokeWidth: 1.8,
-      strokeLinecap: 'square',
-      strokeLinejoin: 'miter',
-      fill: 'none',
-      stroke: 'currentColor',
-    },
-    sizeInherit: {
-      fontSize: 'inherit',
-    },
-    sizeXs: {
-      width: responsiveVal(11, 13),
-      height: responsiveVal(11, 13),
-      strokeWidth: 2.1,
-    },
-    sizeSmall: {
-      width: responsiveVal(12, 16),
-      height: responsiveVal(12, 16),
-      strokeWidth: 2.1,
-    },
-    sizeLarge: {
-      width: responsiveVal(24, 28),
-      height: responsiveVal(24, 28),
-      strokeWidth: 1.4,
-    },
-    sizeXl: {
-      width: responsiveVal(38, 62),
-      height: responsiveVal(38, 62),
-      strokeWidth: 1.4,
-    },
-    sizeXxl: {
-      width: responsiveVal(96, 148),
-      height: responsiveVal(96, 148),
-      strokeWidth: 0.8,
-    },
-    muted: {},
-    inverted: {},
-  },
-  { name: 'SvgImageSimple' },
-)
-
-type SvgImageSimpleProps = Omit<ImageProps, 'fixed'> & {
-  /** The fontSize applied to the icon. Defaults to 24px, but can be configure to inherit font size. */
-  size?: 'default' | 'inherit' | 'xxl' | 'xl' | 'large' | 'medium' | 'small' | 'xs'
-  fill?: boolean
-  muted?: boolean
-  inverted?: boolean
-}
-
-const SvgImageSimple = forwardRef<SVGSVGElement, SvgImageSimpleProps>((props, ref) => {
-  const {
-    style,
-    className,
-    size = 'medium',
-    muted,
-    inverted,
-    fill,
-    layout = 'fixed',
-    ...imageProps
-  } = props
-  const classes = useStyles()
-
-  let { src } = imageProps
-  let staticSrc = ''
-  if (isStaticImport(src)) staticSrc = (isStaticRequire(src) ? src.default : src).src
-  src = typeof src === 'string' ? src : staticSrc
-
-  return (
-    <svg
-      ref={ref}
-      className={clsx(
-        className,
-        classes.image,
-        classes?.[`size${capitalize(size)}`],
-        muted && classes.muted,
-        inverted && classes.inverted,
-      )}
-      aria-hidden='true'
-      style={style}
-    >
-      <use href={`${src}#icon`} />
-    </svg>
-  )
-})
-SvgImageSimple.displayName = 'SvgImageSimple'
-
-export default SvgImageSimple

package/SvgImage/index.tsx

@@ -1,74 +0,0 @@
-import { Image, ImageProps } from '@graphcommerce/image'
-import { makeStyles, Theme } from '@material-ui/core'
-import React from 'react'
-import { UseStyles } from '../Styles'
-
-// TODO: fix hot reloading issues when modifying implementations of this component
-export type SvgImageSize = 'small' | 'medium' | 'large' | 'extralarge'
-
-export type SvgImageProps = ImageProps & {
-  size?: SvgImageSize | number
-  mobileSize?: SvgImageSize | number
-  shade?: SvgImageShade
-} & UseStyles<typeof useStyles>
-
-export type SvgImageShade = 'muted' | 'default' | 'inverted'
-
-export const SvgImageShades: Record<SvgImageShade, number> = {
-  muted: 75,
-  default: 0,
-  inverted: 100,
-}
-
-export type UseStylesProps = { shade: number; baseSize: number; mobileSize: number }
-
-const useStyles = makeStyles(
-  (theme: Theme) => ({
-    root: ({ shade, baseSize, mobileSize }: UseStylesProps) => ({
-      filter: shade > 0 ? `invert(${shade}%)` : undefined,
-      objectFit: 'contain',
-      width: mobileSize ?? Math.round(baseSize * 0.75),
-      height: mobileSize ?? Math.round(baseSize * 0.75),
-      [theme.breakpoints.up('md')]: {
-        width: baseSize,
-        height: baseSize,
-      },
-    }),
-  }),
-  { name: 'SvgImage' },
-)
-
-export default function SvgImage(props: SvgImageProps) {
-  const { src, size = 'medium', mobileSize, shade = 'default', ...imageProps } = props
-
-  // if (isStaticImageData(src)) {
-  //   console.log(src.height)
-  //   console.log(src.width)
-  // }
-
-  const baseSizes = {
-    small: 24,
-    medium: 32,
-    large: 48,
-    extralarge: 64,
-  }
-
-  const classes = useStyles({
-    ...props,
-    mobileSize: baseSizes[mobileSize ?? ''] ?? mobileSize,
-    baseSize: baseSizes[size ?? ''] ?? size,
-    shade: SvgImageShades[shade],
-  })
-
-  return (
-    <Image
-      layout='fixed'
-      unoptimized
-      src={src}
-      className={classes.root}
-      // height={24}
-      // width={24}
-      {...imageProps}
-    />
-  )
-}