@graphcommerce/next-ui 3.25.3 → 4.1.0

package/Form/InputCheckmark.tsx

@@ -1,21 +1,8 @@
-import { makeStyles } from '@material-ui/core'
-import clsx from 'clsx'
-import React, { PropsWithChildren } from 'react'
-import SvgImageSimple from '../SvgImage/SvgImageSimple'
+import { SvgIconProps } from '@mui/material'
+import { SvgIcon } from '../SvgIcon/SvgIcon'
 import { iconCheckmark } from '../icons'
 
-export type InputCheckmarkProps = PropsWithChildren<{ show?: boolean; select?: boolean }>
-const useStyles = makeStyles(
-  {
-    iconCheckmark: {
-      stroke: '#01D26A',
-    },
-    select: {
-      marginRight: 15,
-    },
-  },
-  { name: 'InputCheckmark' },
-)
+export type InputCheckmarkProps = { show?: boolean; select?: boolean } & Omit<SvgIconProps, 'src'>
 
 /**
  * When the `valid` prop is passed it will render a CheckIcon, else it will render children.
@@ -24,15 +11,15 @@ const useStyles = makeStyles(
  * ;<InputCheckmark valid>Fallback things</InputCheckmark>
  * ```
  */
-export default function InputCheckmark(props: InputCheckmarkProps) {
-  const { show: valid, children, select = false } = props
-  const classes = useStyles()
+export function InputCheckmark(props: InputCheckmarkProps) {
+  const { show, children, select = false } = props
 
-  if (!valid) return <>{children}</>
+  if (!show) return <>{children}</>
   return (
-    <SvgImageSimple
+    <SvgIcon
       src={iconCheckmark}
-      className={clsx(classes.iconCheckmark, select && classes.select)}
+      className='InputCheckmark'
+      sx={[{ stroke: '#01D26A' }, select && { marginRight: '15px' }]}
     />
   )
 }

package/FramerScroller/SidebarGallery.tsx

@@ -0,0 +1,340 @@
+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, useTheme, alpha, Box, styled } from '@mui/material'
+import { m, useDomEvent, useMotionValue } from 'framer-motion'
+import { useRouter } from 'next/router'
+import React, { useEffect, useRef } from 'react'
+import { Row } from '../Row'
+import { extendableComponent } from '../Styles'
+import { responsiveVal } from '../Styles/responsiveVal'
+import { SvgIcon } from '../SvgIcon/SvgIcon'
+import { iconChevronLeft, iconChevronRight, iconFullscreen, iconFullscreenExit } from '../icons'
+
+const MotionBox = styled(m.div)({})
+
+type OwnerState = { zoomed: boolean }
+const name = 'SidebarGallery' as const
+const parts = [
+  'row',
+  'root',
+  'scrollerContainer',
+  'scroller',
+  'sidebarWrapper',
+  'sidebar',
+  'bottomCenter',
+  'sliderButtons',
+  'toggleIcon',
+  'topRight',
+  'centerLeft',
+  'centerRight',
+  'dots',
+] as const
+const { withState, selectors } = extendableComponent<OwnerState, typeof name, typeof parts>(
+  name,
+  parts,
+)
+
+export type SidebarGalleryProps = {
+  sidebar: React.ReactNode
+  images: MotionImageAspectProps[]
+  aspectRatio?: [number, number]
+  routeHash?: string
+}
+
+export function SidebarGallery(props: SidebarGalleryProps) {
+  const { sidebar, images, aspectRatio: [width, height] = [1, 1], routeHash = 'gallery' } = props
+
+  const router = useRouter()
+  const prevRoute = usePrevPageRouter()
+  const clientHeight = useMotionValueValue(clientSize.y, (y) => y)
+  // const classes = useMergedClasses(useStyles({ clientHeight, aspectRatio }).classes, props.classes)
+
+  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 classes = withState({ 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 })
+
+  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 (
+    <ScrollerProvider scrollSnapAlign='center'>
+      <Row maxWidth={false} disableGutters className={classes.row}>
+        <MotionBox
+          layout
+          className={classes.root}
+          sx={[
+            {
+              willChange: 'transform',
+              display: 'grid',
+              [theme.breakpoints.up('md')]: {
+                gridTemplateColumns: '1fr auto',
+              },
+              background:
+                theme.palette.mode === 'light'
+                  ? theme.palette.background.image
+                  : theme.palette.background.paper,
+              paddingRight: `calc((100% - ${theme.breakpoints.values.lg}px) / 2)`,
+            },
+            zoomed && {
+              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,
+            },
+          ]}
+        >
+          <MotionBox
+            layout
+            className={classes.scrollerContainer}
+            sx={[
+              {
+                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('md')]: {
+                  width: '100vw',
+                },
+              },
+              zoomed && {
+                paddingTop: `${clientHeight}px`,
+              },
+            ]}
+            onLayoutAnimationComplete={() => {
+              if (!zoomed) document.body.style.overflow = ''
+            }}
+          >
+            <Scroller
+              className={classes.scroller}
+              hideScrollbar
+              onMouseDown={onMouseDownScroller}
+              onMouseUp={onMouseUpScroller}
+              sx={[
+                {
+                  willChange: 'transform',
+                  position: 'absolute',
+                  top: 0,
+                  width: '100%',
+                  height: '100%',
+                  gridAutoColumns: `100%`,
+                  gridTemplateRows: `100%`,
+                  cursor: 'zoom-in',
+                },
+                zoomed && {
+                  height: clientHeight,
+                  cursor: 'inherit',
+                },
+              ]}
+            >
+              {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>
+            <MotionBox
+              layout
+              className={classes.topRight}
+              sx={{
+                display: 'grid',
+                gridAutoFlow: 'column',
+                top: theme.spacings.sm,
+                gap: theme.spacings.xxs,
+                position: 'absolute',
+                right: theme.spacings.sm,
+              }}
+            >
+              <Fab
+                size='small'
+                className={classes.toggleIcon}
+                onMouseUp={toggle}
+                aria-label='Toggle Fullscreen'
+                sx={{
+                  boxShadow: theme.shadows[6],
+                }}
+              >
+                {!zoomed ? <SvgIcon src={iconFullscreen} /> : <SvgIcon src={iconFullscreenExit} />}
+              </Fab>
+            </MotionBox>
+            <Box
+              className={classes.centerLeft}
+              sx={{
+                display: 'grid',
+                gridAutoFlow: 'row',
+                gap: theme.spacings.xxs,
+                position: 'absolute',
+                left: theme.spacings.sm,
+                top: `calc(50% - 28px)`,
+              }}
+            >
+              <ScrollerButton
+                layout
+                direction='left'
+                size='small'
+                className={classes.sliderButtons}
+              >
+                <SvgIcon src={iconChevronLeft} />
+              </ScrollerButton>
+            </Box>
+            <Box
+              className={classes.centerRight}
+              sx={{
+                display: 'grid',
+                gap: theme.spacings.xxs,
+                position: 'absolute',
+                right: theme.spacings.sm,
+                top: `calc(50% - 28px)`,
+              }}
+            >
+              <ScrollerButton
+                layout
+                direction='right'
+                size='small'
+                className={classes.sliderButtons}
+              >
+                <SvgIcon src={iconChevronRight} />
+              </ScrollerButton>
+            </Box>
+
+            <Box
+              className={classes.bottomCenter}
+              sx={{
+                display: 'grid',
+                gridAutoFlow: 'column',
+                gap: theme.spacings.xxs,
+                position: 'absolute',
+                bottom: theme.spacings.xxs,
+                justifyContent: 'center',
+                width: '100%',
+                pointerEvents: 'none',
+                '& > *': {
+                  pointerEvents: 'all',
+                },
+              }}
+            >
+              <ScrollerDots
+                layout
+                sx={{
+                  background: alpha(theme.palette.background.paper, 1),
+                  boxShadow: theme.shadows[6],
+                }}
+              />
+            </Box>
+          </MotionBox>
+
+          <Box
+            className={classes.sidebarWrapper}
+            sx={[
+              {
+                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)`,
+                },
+              },
+              zoomed && {
+                [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)`,
+                },
+              },
+            ]}
+          >
+            <MotionBox
+              layout
+              className={classes.sidebar}
+              sx={{
+                boxSizing: 'border-box',
+                width: '100%',
+                padding: `${theme.spacings.lg} ${theme.page.horizontal}`,
+                [theme.breakpoints.up('md')]: {
+                  paddingLeft: theme.spacings.lg,
+                },
+              }}
+            >
+              {sidebar}
+            </MotionBox>
+          </Box>
+        </MotionBox>
+      </Row>
+    </ScrollerProvider>
+  )
+}
+
+SidebarGallery.selectors = selectors

package/FramerScroller/SidebarSlider.tsx

@@ -0,0 +1,107 @@
+import {
+  Scroller,
+  ScrollerButton,
+  ScrollerPageCounter,
+  ScrollerProvider,
+} from '@graphcommerce/framer-scroller'
+import { Box, SxProps, Theme } from '@mui/material'
+import { ReactNode } from 'react'
+import { Row } from '../Row'
+import { extendableComponent } from '../Styles/extendableComponent'
+import { responsiveVal } from '../Styles/responsiveVal'
+import { SvgIcon } from '../SvgIcon/SvgIcon'
+import { iconChevronLeft, iconChevronRight } from '../icons'
+
+const { classes, selectors } = extendableComponent('SidebarSlider', [
+  'root',
+  'grid',
+  'sidebar',
+  'scrollerContainer',
+  'scroller',
+  'sliderButtons',
+  'centerLeft',
+  'centerRight',
+] as const)
+
+export type SidebarSliderProps = { children: ReactNode; sidebar: ReactNode; sx?: SxProps<Theme> }
+
+export function SidebarSlider(props: SidebarSliderProps) {
+  const { children, sidebar, sx } = props
+
+  return (
+    <Row maxWidth={false} disableGutters className={classes.root} sx={sx}>
+      <ScrollerProvider scrollSnapAlign='start'>
+        <Box
+          className={classes.grid}
+          sx={{
+            display: 'grid',
+            gridTemplateColumns: 'minmax(150px, 25%) 1fr',
+            maxWidth: '100%',
+          }}
+        >
+          <Box
+            className={classes.sidebar}
+            sx={(theme) => ({
+              display: 'grid',
+              alignContent: 'space-between',
+              padding: `0 ${theme.spacings.lg} 0 ${theme.page.horizontal}`,
+            })}
+          >
+            <Box>{sidebar}</Box>
+            <ScrollerPageCounter />
+          </Box>
+
+          <Box className={classes.scrollerContainer} sx={{ position: 'relative', minWidth: 1 }}>
+            <Scroller
+              className={classes.scroller}
+              hideScrollbar
+              sx={(theme) => ({
+                gridColumnGap: theme.spacings.md,
+                gridRowGap: theme.spacings.lg,
+                paddingRight: theme.page.horizontal,
+                gridAutoColumns: responsiveVal(200, 400),
+              })}
+            >
+              {children}
+            </Scroller>
+            <Box
+              className={classes.centerLeft}
+              sx={(theme) => ({
+                display: 'grid',
+                gridAutoFlow: 'row',
+                gap: theme.spacings.xxs,
+                position: 'absolute',
+                left: theme.spacings.sm,
+                top: `calc(50% - 28px)`,
+              })}
+            >
+              <ScrollerButton
+                direction='left'
+                className={classes.sliderButtons}
+                sx={{ display: { xs: 'none', md: 'flex' } }}
+              >
+                <SvgIcon src={iconChevronLeft} />
+              </ScrollerButton>
+            </Box>
+            <Box
+              className={classes.centerRight}
+              sx={(theme) => ({
+                display: 'grid',
+                gap: theme.spacings.xxs,
+                position: 'absolute',
+                right: theme.spacings.sm,
+                top: `calc(50% - 28px)`,
+              })}
+            >
+              <ScrollerButton direction='right' className={classes.sliderButtons}>
+                <SvgIcon src={iconChevronRight} />
+              </ScrollerButton>
+            </Box>
+          </Box>
+        </Box>
+      </ScrollerProvider>
+    </Row>
+  )
+}
+
+SidebarSlider.selectors = selectors

package/FramerScroller/index.ts

@@ -0,0 +1,2 @@
+export * from './SidebarGallery'
+export * from './SidebarSlider'

package/FullPageMessage/index.tsx

@@ -1,38 +1,8 @@
-import { Container, Theme, Typography } from '@material-ui/core'
-import { makeStyles } from '@material-ui/styles'
-import clsx from 'clsx'
+import { Box, Container, SxProps, Theme, Typography } from '@mui/material'
 import React from 'react'
+import { extendableComponent } from '../Styles'
 import { responsiveVal } from '../Styles/responsiveVal'
 
-const useStyles = makeStyles(
-  (theme: Theme) => ({
-    root: {
-      alignItems: 'center',
-      marginTop: theme.spacings.md,
-      marginBottom: theme.spacings.md,
-    },
-    innerContainer: {
-      display: 'grid',
-      alignItems: 'center',
-      justifyItems: 'center',
-    },
-    rootMargin: {
-      marginTop: responsiveVal(50, 250),
-    },
-    subject: {
-      textAlign: 'center',
-      marginTop: theme.spacings.sm,
-    },
-    button: {
-      marginTop: theme.spacings.sm,
-    },
-    altButton: {
-      marginTop: 6,
-    },
-  }),
-  { name: 'FullPageMessage' },
-)
-
 export type FullPageMessageProps = {
   icon: React.ReactNode
   title: React.ReactNode
@@ -40,31 +10,65 @@ export type FullPageMessageProps = {
   button?: React.ReactNode
   altButton?: React.ReactNode
   disableMargin?: boolean
+  sx?: SxProps<Theme>
 }
 
-export default function FullPageMessage(props: FullPageMessageProps) {
-  const { icon, title, children, button, altButton, disableMargin = false } = props
-  const classes = useStyles()
+const { classes, selectors } = extendableComponent('FullPageMessage', [
+  'root',
+  'innerContainer',
+  'subject',
+  'button',
+  'altButton',
+  'iconWrapper',
+] as const)
+
+export function FullPageMessage(props: FullPageMessageProps) {
+  const { icon, title, children, button, altButton, disableMargin = false, sx = [] } = props
 
   return (
-    <div className={clsx(classes.root, disableMargin || classes.rootMargin)}>
-      <Container maxWidth='md' className={classes.innerContainer}>
-        <div>{icon}</div>
+    <Box
+      className={classes.root}
+      sx={[
+        (theme) => ({
+          alignItems: 'center',
+          marginTop: theme.spacings.md,
+          marginBottom: theme.spacings.md,
+        }),
+        !disableMargin && {
+          marginTop: responsiveVal(50, 250),
+        },
+        ...(Array.isArray(sx) ? sx : [sx]),
+      ]}
+    >
+      <Container
+        maxWidth='md'
+        className={classes.innerContainer}
+        sx={{
+          display: 'grid',
+          alignItems: 'center',
+          justifyItems: 'center',
+        }}
+      >
+        <Box className={classes.iconWrapper}>{icon}</Box>
 
-        <div className={classes.subject}>
+        <Box
+          className={classes.subject}
+          sx={(theme) => ({ textAlign: 'center', marginTop: theme.spacings.sm })}
+        >
           <Typography variant='h3' gutterBottom>
             {title}
           </Typography>
-          {children && (
-            <Typography component='div' variant='body1'>
-              {children}
-            </Typography>
-          )}
-        </div>
+          {children && <Box typography='body1'>{children}</Box>}
+        </Box>
 
-        <div className={classes.button}>{button}</div>
-        <div className={classes.altButton}>{altButton}</div>
+        <Box className={classes.button} sx={(theme) => ({ marginTop: theme.spacings.sm })}>
+          {button}
+        </Box>
+        <Box className={classes.altButton} sx={{ marginTop: '6px' }}>
+          {altButton}
+        </Box>
       </Container>
-    </div>
+    </Box>
   )
 }
+FullPageMessage.selectors = selectors

package/Highlight/index.tsx

@@ -1,4 +1,4 @@
-export default function Highlight(props: { text: string; highlight: string }) {
+export function Highlight(props: { text: string; highlight: string }) {
   const { text, highlight } = props
   const start = text.toLocaleLowerCase().indexOf(highlight.toLocaleLowerCase())