@graphcommerce/next-ui 3.0.1

package/FramerScroller/components/SidebarGallery.tsx

@@ -0,0 +1,246 @@
+import { Fab, makeStyles, Theme, useTheme } from '@material-ui/core'
+import {
+  ScrollerButton,
+  ScrollerDots,
+  ScrollerProvider,
+  Scroller,
+  MotionImageAspectProps,
+  CenterSlide,
+  MotionImageAspect,
+} from '@graphcommerce/framer-scroller'
+import { clientSize, useMotionValueValue } from '@graphcommerce/framer-utils'
+import clsx from 'clsx'
+import { m } from 'framer-motion'
+import React, { useState } from 'react'
+import { UseStyles } from '../../Styles'
+import responsiveVal from '../../Styles/responsiveVal'
+import SvgImage from '../../SvgImage'
+import SvgImageSimple from '../../SvgImage/SvgImageSimple'
+import {
+  iconChevronLeft,
+  iconChevronRight,
+  iconCollapseVertical,
+  iconExpandVertical,
+} from '../../icons'
+
+type StyleProps = {
+  aspectRatio: [number, number]
+  clientHeight: number
+}
+
+const useStyles = makeStyles(
+  (theme: Theme) => ({
+    root: {
+      display: 'grid',
+      [theme.breakpoints.up('md')]: {
+        gridTemplateColumns: '1fr auto',
+      },
+      background: theme.palette.background.highlight,
+      paddingRight: `calc((100% - ${theme.breakpoints.values.lg}px) / 2)`,
+      marginBottom: theme.spacings.lg,
+    },
+    rootZoomed: {
+      position: 'relative',
+      zIndex: theme.zIndex.modal,
+      marginTop: 0,
+      [theme.breakpoints.up('md')]: {
+        marginTop: `calc(${theme.page.headerInnerHeight.md} * -1  - ${theme.spacings.sm} * 2)`,
+      },
+      paddingRight: 0,
+    },
+    scrollerContainer: ({ aspectRatio: [width, height] }: StyleProps) => {
+      const headerHeight = `${theme.page.headerInnerHeight.sm} - ${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 {
+        height: 0, // https://stackoverflow.com/questions/44770074/css-grid-row-height-safari-bug
+        position: 'relative',
+        minHeight: '100%',
+        paddingTop: `min(${ratio}, ${maxHeight})`,
+        borderRadius: 2,
+        [theme.breakpoints.down('sm')]: {
+          width: '100vw',
+        },
+      }
+    },
+    scrollerContainerZoomed: ({ clientHeight }: StyleProps) => ({
+      paddingTop: clientHeight,
+    }),
+    scroller: {
+      position: 'absolute',
+      top: 0,
+      width: '100%',
+      height: '100%',
+      display: `grid`,
+      gridAutoFlow: `column`,
+      gridTemplateColumns: `repeat(100, 100%)`,
+      gridTemplateRows: `100%`,
+    },
+
+    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.md} ${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[2],
+    },
+    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)`,
+    },
+  }),
+  { name: 'SidebarGallery' },
+)
+
+export type SidebarGalleryProps = {
+  sidebar: React.ReactNode
+  images: MotionImageAspectProps[]
+  aspectRatio?: [number, number]
+} & UseStyles<typeof useStyles>
+
+export default function SidebarGallery(props: SidebarGalleryProps) {
+  const { sidebar, images, aspectRatio = [1, 1] } = props
+  const [zoomed, setZoomed] = useState(false)
+
+  const clientHeight = useMotionValueValue(clientSize.y, (y) => y)
+  const classes = useStyles({ clientHeight, aspectRatio })
+
+  const toggle = () => {
+    setZoomed(!zoomed)
+    if (!zoomed) {
+      document.body.style.overflow = 'hidden'
+      window.scrollTo({ top: 0, behavior: 'smooth' })
+    }
+  }
+
+  const clsxZoom = (key: string) => clsx(classes?.[key], zoomed && classes?.[`${key}Zoomed`])
+
+  const theme = useTheme()
+
+  return (
+    <ScrollerProvider scrollSnapAlign='center'>
+      <m.div layout className={clsxZoom('root')}>
+        <m.div
+          layout
+          className={clsxZoom('scrollerContainer')}
+          onLayoutAnimationComplete={() => {
+            if (!zoomed) document.body.style.overflow = ''
+          }}
+        >
+          <Scroller className={clsxZoom('scroller')} hideScrollbar>
+            {images.map((image, idx) => (
+              <CenterSlide key={typeof image.src === 'string' ? image.src : idx}>
+                <MotionImageAspect
+                  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',
+                  }}
+                  dontReportWronglySizedImages
+                />
+              </CenterSlide>
+            ))}
+          </Scroller>
+          <m.div layout className={classes.topRight}>
+            <Fab color='inherit' size='small' className={classes.toggleIcon} onClick={toggle}>
+              {!zoomed ? (
+                <SvgImage src={iconExpandVertical} alt='Zoom in' loading='eager' />
+              ) : (
+                <SvgImage src={iconCollapseVertical} alt='Zoom out' loading='eager' />
+              )}
+            </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 />
+          </div>
+        </m.div>
+        <div className={clsxZoom('sidebarWrapper')}>
+          <m.div layout className={clsxZoom('sidebar')}>
+            {sidebar}
+          </m.div>
+        </div>
+      </m.div>
+    </ScrollerProvider>
+  )
+}

package/FramerScroller/components/SidebarSlider.tsx

@@ -0,0 +1,103 @@
+import { relative } from 'path/posix'
+import { Theme } from '@material-ui/core'
+import { makeStyles } from '@material-ui/styles'
+import {
+  Scroller,
+  ScrollerButton,
+  ScrollerPageCounter,
+  ScrollerProvider,
+} from '@graphcommerce/framer-scroller'
+import React, { ReactNode } from 'react'
+import { SvgImageSimple, iconChevronLeft, iconChevronRight } from '../..'
+import { UseStyles } from '../../Styles'
+import responsiveVal from '../../Styles/responsiveVal'
+
+const useStyles = makeStyles(
+  (theme: Theme) => ({
+    root: {
+      display: 'grid',
+      gridTemplateColumns: 'minmax(150px, 25%) 1fr',
+      maxWidth: '100%',
+      marginBottom: `${theme.spacings.xl}`,
+    },
+    sidebar: {
+      display: 'grid',
+      alignContent: 'space-between',
+      padding: `0 ${theme.spacings.lg} 0 ${theme.page.horizontal}`,
+    },
+    scrollerContainer: {
+      position: 'relative',
+      minWidth: 1,
+    },
+    scroller: {
+      width: '100%',
+      display: 'grid',
+      gridAutoFlow: 'column',
+      gridColumnGap: theme.spacings.md,
+      gridRowGap: theme.spacings.lg,
+      alignContent: 'space-around',
+      paddingRight: theme.page.horizontal,
+
+      '& > *': {
+        minWidth: 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 (
+    <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 layout direction='left' className={classes.sliderButtons}>
+              <SvgImageSimple src={iconChevronLeft} />
+            </ScrollerButton>
+          </div>
+          <div className={classes.centerRight}>
+            <ScrollerButton layout direction='right' className={classes.sliderButtons}>
+              <SvgImageSimple src={iconChevronRight} />
+            </ScrollerButton>
+          </div>
+        </div>
+      </div>
+    </ScrollerProvider>
+  )
+}

package/FullPageMessage/index.tsx

@@ -0,0 +1,68 @@
+import { Container, Theme, Typography } from '@material-ui/core'
+import { makeStyles } from '@material-ui/styles'
+import React from 'react'
+import PageMeta from '../PageMeta'
+import responsiveVal from '../Styles/responsiveVal'
+
+const useStyles = makeStyles(
+  (theme: Theme) => ({
+    root: {
+      marginTop: responsiveVal(50, 250),
+      alignItems: 'center',
+    },
+    subject: {
+      textAlign: 'center',
+      margin: `${theme.spacings.sm} 0`,
+    },
+    description: {
+      marginTop: 8,
+    },
+    innerContainer: {
+      display: 'grid',
+      alignItems: 'center',
+      justifyItems: 'center',
+    },
+    button: {
+      marginTop: 6,
+    },
+  }),
+  {
+    name: 'FullPageMessage',
+  },
+)
+
+export type FullPageMessageProps = {
+  icon: React.ReactNode
+  title: React.ReactNode
+  description?: React.ReactNode
+  button?: React.ReactNode
+  altButton?: React.ReactNode
+}
+
+export default function FullPageMessage(props: FullPageMessageProps) {
+  const { icon, title, description, button, altButton } = props
+  const classes = useStyles()
+
+  return (
+    <div className={classes.root}>
+      <Container maxWidth='md' className={classes.innerContainer}>
+        <PageMeta title='Account' metaDescription='Account Dashboard' metaRobots={['noindex']} />
+        {icon}
+
+        <div className={classes.subject}>
+          <Typography component='h2' variant='h4'>
+            {title}
+          </Typography>
+          {description && (
+            <Typography component='p' variant='body1' className={classes.description}>
+              {description}
+            </Typography>
+          )}
+        </div>
+
+        <div>{button}</div>
+        <div className={classes.button}>{altButton}</div>
+      </Container>
+    </div>
+  )
+}

package/Highlight/index.tsx

@@ -0,0 +1,14 @@
+export default function Highlight(props: { text: string; highlight: string }) {
+  const { text, highlight } = props
+  const start = text.toLocaleLowerCase().indexOf(highlight.toLocaleLowerCase())
+
+  if (start < 0) return <>{text}</>
+
+  return (
+    <>
+      {text.slice(0, start)}
+      <strong>{text.slice(start, highlight.length + start)}</strong>
+      {text.slice(start + highlight.length)}
+    </>
+  )
+}

package/IconHeader/index.tsx

@@ -0,0 +1,109 @@
+import { makeStyles, Theme, Typography } from '@material-ui/core'
+import clsx from 'clsx'
+import React from 'react'
+import responsiveVal from '../Styles/responsiveVal'
+import SvgImage, { SvgImageProps } from '../SvgImage'
+
+// TODO: remove all occurrences. deprecated component
+
+const useStyles = makeStyles(
+  (theme: Theme) => ({
+    container: {
+      textAlign: 'center',
+      fontSize: responsiveVal(16, 24),
+    },
+    innerContainer: {
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      gap: 4,
+    },
+    breakColumnsDesktop: {
+      [theme.breakpoints.up('md')]: {
+        display: 'unset',
+      },
+    },
+    margin: {
+      marginTop: theme.spacings.sm,
+      marginBottom: theme.spacings.sm,
+    },
+    ellipsis: {
+      whiteSpace: 'nowrap',
+      overflow: 'hidden',
+      textOverflow: 'ellipsis',
+    },
+    mediumFontWeight: {
+      fontWeight: 700,
+    },
+  }),
+  { name: 'IconHeader' },
+)
+
+export type IconHeaderSize = 'small' | 'medium' | 'large'
+
+type IconHeaderProps = {
+  title: string
+  size?: IconHeaderSize
+  iconSize?: number
+  iconSizeMobile?: number
+  noMargin?: boolean
+  stayInline?: boolean
+  ellipsis?: boolean
+} & Pick<SvgImageProps, 'src' | 'alt'>
+
+type IconHeaderHeadings = 'h2' | 'h4' | 'h5'
+
+export default function IconHeader(props: IconHeaderProps) {
+  const {
+    title,
+    size = 'large',
+    stayInline = false,
+    noMargin = false,
+    ellipsis = false,
+    iconSize,
+    iconSizeMobile,
+    ...svgImageProps
+  } = props
+  const classes = useStyles()
+
+  const variants: Record<IconHeaderSize, IconHeaderHeadings> = {
+    small: 'h5',
+    medium: 'h4',
+    large: 'h2',
+  }
+
+  const iconSizes = {
+    small: 32,
+    medium: 48,
+    large: 64,
+  }
+
+  const iconMobileSizes = {
+    small: 24,
+    medium: 32,
+    large: 40,
+  }
+
+  return (
+    <div className={clsx(classes.container, !noMargin && classes.margin)}>
+      <div className={clsx(classes.innerContainer, !stayInline && classes.breakColumnsDesktop)}>
+        <SvgImage
+          {...svgImageProps}
+          size={iconSize ?? iconSizes[size]}
+          mobileSize={iconSizeMobile ?? iconMobileSizes[size]}
+          loading='eager'
+        />
+        <Typography
+          variant={variants[size]}
+          component='h2'
+          className={clsx(
+            ellipsis && classes.ellipsis,
+            size === 'medium' && classes.mediumFontWeight,
+          )}
+        >
+          {title}
+        </Typography>
+      </div>
+    </div>
+  )
+}

package/JsonLd/index.tsx

@@ -0,0 +1,18 @@
+import Head from 'next/head'
+import React from 'react'
+import { jsonLdScriptProps } from 'react-schemaorg'
+import { Thing, WithContext } from 'schema-dts'
+
+export type JsonLdProps<T extends Thing> = {
+  item: WithContext<T>
+}
+
+export default function JsonLd<T extends Thing>(props: JsonLdProps<T>) {
+  const { item } = props
+
+  return (
+    <Head>
+      <script key='jsonld' {...jsonLdScriptProps<T>(item)} />
+    </Head>
+  )
+}

package/Page/App.tsx

@@ -0,0 +1,15 @@
+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 { 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>
+      <FramerNextPages {...props} />
+    </LazyMotion>
+  )
+}

package/Page/Document.tsx

@@ -0,0 +1,23 @@
+import { ServerStyleSheets } from '@material-ui/core/styles'
+import NextDocument, { DocumentContext } from 'next/document'
+import React from 'react'
+
+export default class Document extends NextDocument {
+  static getInitialProps = async (ctx: DocumentContext) => {
+    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/Page/framerFeatures.ts

@@ -0,0 +1,4 @@
+// features.js
+import { domMax } from 'framer-motion'
+
+export default domMax

package/Page/types.ts

@@ -0,0 +1,19 @@
+import { ParsedUrlQuery } from 'querystring'
+import { NormalizedCacheObject } from '@apollo/client'
+import { GetStaticProps as GetStaticPropsNext } from 'next'
+import { AppProps as NextAppProps } from 'next/app'
+
+type AnyObj = Record<string, unknown>
+
+type ApolloStateProps = { apolloState: NormalizedCacheObject }
+
+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

@@ -0,0 +1,46 @@
+import { LinearProgress, makeStyles, Fade } from '@material-ui/core'
+import zIndex from '@material-ui/core/styles/zIndex'
+import { useRouter } from 'next/router'
+import React, { 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()
+  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)
+
+    return () => {
+      router.events.off('routeChangeStart', show)
+      router.events.off('routeChangeComplete', hide)
+      router.events.off('routeChangeError', hide)
+    }
+  }, [router.events])
+
+  return (
+    <Fade in={loading}>
+      <LinearProgress className={classes.progress} />
+    </Fade>
+  )
+}
+
+export default PageLoadIndicator