@graphcommerce/next-ui 3.19.1 → 3.20.3

package/AppShell/SheetShellBase/index.tsx

@@ -1,114 +0,0 @@
-import { usePageContext, usePageRouter } from '@graphcommerce/framer-next-pages'
-import {
-  ClassKeys,
-  Sheet,
-  SheetBackdrop,
-  SheetContainer,
-  SheetPanel,
-  SheetProps,
-  SnapPoint,
-  styles as sheetStyles,
-} from '@graphcommerce/framer-sheet'
-import { makeStyles, StyleRules, Theme } from '@material-ui/core'
-import { useDomEvent } from 'framer-motion'
-import { useRouter } from 'next/router'
-import React, { useEffect, useRef, useState } from 'react'
-import responsiveVal from '../../Styles/responsiveVal'
-import AppShellProvider from '../AppShellProvider'
-import ShellBase, { PageLayoutBaseProps } from '../ShellBase'
-import useSheetStyles from './useSheetStyles'
-
-export type SheetShellBaseProps = {
-  header?: React.ReactNode
-  children?: React.ReactNode
-} & Pick<SheetProps, 'size' | 'variant'> &
-  PageLayoutBaseProps
-
-const styles = sheetStyles as StyleRules<ClassKeys>
-
-const useStyles = makeStyles(
-  (theme: Theme) => ({
-    container: {
-      ...styles.container,
-    },
-    containertop: {
-      ...styles.containertop,
-    },
-    containerbottom: {
-      ...styles.containerbottom,
-      paddingTop: `calc(${theme.page.headerInnerHeight.md} * 0.55)`,
-      [theme.breakpoints.up('md')]: {
-        // offset top is x% of the header height, so it slightly overlaps the logo
-        paddingTop: `calc(${theme.page.headerInnerHeight.md} * 0.85)`,
-      },
-    },
-    containerleft: {
-      ...styles.containerleft,
-      paddingRight: responsiveVal(26, 48),
-    },
-    containerright: {
-      ...styles.containerright,
-      paddingLeft: responsiveVal(26, 48),
-    },
-  }),
-  { name: 'SheetShellBase' },
-)
-
-function SheetShellBase(props: SheetShellBaseProps) {
-  const { children, variant, size, name } = props
-  const sheetContainerClasses = useStyles()
-  const sheetClasses = useSheetStyles(props)
-  const router = useRouter()
-  const pageRouter = usePageRouter()
-  const { depth, closeSteps, active, direction } = usePageContext()
-  const open = depth < 0 || router.asPath === pageRouter.asPath
-  const initialLocale = useRef(router.locale)
-  const [isNavigating, setIsNavigating] = useState<boolean>(false)
-
-  function handleClose() {
-    if (!isNavigating) {
-      setIsNavigating(true)
-      return initialLocale.current !== router.locale
-        ? pageRouter.push('/')
-        : pageRouter.go(closeSteps * -1)
-    }
-  }
-
-  function handleSnap(snapPoint: SnapPoint) {
-    if (snapPoint !== 'closed') return
-    // eslint-disable-next-line @typescript-eslint/no-floating-promises
-    handleClose()
-  }
-
-  const windowRef = useRef(typeof window !== 'undefined' ? window : null)
-
-  function handleEscapeKey(e: KeyboardEvent | Event) {
-    if (active) {
-      if ((e as KeyboardEvent)?.key === 'Escape') {
-        // eslint-disable-next-line @typescript-eslint/no-floating-promises
-        handleClose()
-      }
-    }
-  }
-
-  useDomEvent(windowRef, 'keyup', handleEscapeKey, { passive: true })
-
-  return (
-    <AppShellProvider>
-      <ShellBase name={name}>
-        <Sheet open={open} onSnap={handleSnap} variant={variant} size={size}>
-          <SheetBackdrop onTap={handleClose} classes={sheetClasses} />
-          <SheetContainer classes={sheetContainerClasses}>
-            <SheetPanel initial={direction === -1 ? 'snapPoint1' : 'closed'} classes={sheetClasses}>
-              {/* <FocusLock returnFocus={{ preventScroll: true }} disabled={!isActive}> */}
-              {children}
-              {/* </FocusLock> */}
-            </SheetPanel>
-          </SheetContainer>
-        </Sheet>
-      </ShellBase>
-    </AppShellProvider>
-  )
-}
-
-export default SheetShellBase

package/AppShell/SheetShellBase/useSheetStyles.ts

@@ -1,18 +0,0 @@
-import styles, { ClassKeys } from '@graphcommerce/framer-sheet/styles'
-import { makeStyles, StyleRules, Theme } from '@material-ui/core'
-import { ClassNameMap } from '@material-ui/styles'
-
-type UseSheetStylesReturn = (props?: Record<string, unknown>) => ClassNameMap<ClassKeys>
-
-const useSheetStyles = makeStyles<Theme, never, ClassKeys>(
-  (theme: Theme) => ({
-    ...(styles as StyleRules<ClassKeys>),
-    content: {
-      ...styles.content,
-      backgroundColor: theme.palette.background.default,
-    },
-  }),
-  { name: 'Sheet' },
-) as UseSheetStylesReturn
-
-export default useSheetStyles

package/AppShell/SheetShellDragIndicator/index.tsx

@@ -1,55 +0,0 @@
-import {
-  SheetDragIndicator,
-  SheetDragIndicatorProps,
-  styles as sheetStyles,
-  ClassKeys,
-} from '@graphcommerce/framer-sheet'
-import { makeStyles, StyleRules } from '@material-ui/core'
-import React from 'react'
-import responsiveVal from '../../Styles/responsiveVal'
-
-const styles = sheetStyles as StyleRules<ClassKeys>
-
-const useStyles = makeStyles(
-  () => ({
-    indicatorRoot: {
-      ...styles.indicatorRoot,
-      position: 'absolute',
-      left: 0,
-      right: 0,
-      top: 0,
-    },
-    indicatorRoottop: {
-      ...styles.indicatorRoottop,
-      padding: `${responsiveVal(4, 8)} 4px 4px 4px`,
-    },
-    indicatorRootbottom: {
-      ...styles.indicatorRootbottom,
-      padding: `${responsiveVal(4, 8)} 4px 4px 4px`,
-    },
-    indicatorRootleft: {
-      ...styles.indicatorRootleft,
-    },
-    indicatorRootright: {
-      ...styles.indicatorRootright,
-    },
-    indicator: {
-      ...styles.indicator,
-      borderRadius: 99,
-      backgroundColor: '#ddd',
-    },
-    indicatortop: { ...styles.indicatortop, width: responsiveVal(12, 40), height: 4 },
-    indicatorbottom: { ...styles.indicatorbottom, width: responsiveVal(12, 40), height: 4 },
-    indicatorleft: { ...styles.indicatorleft, width: 4, height: responsiveVal(12, 40) },
-    indicatorright: { ...styles.indicatorright, width: 4, height: responsiveVal(12, 40) },
-  }),
-  { name: 'SheetShellDragIndicator' },
-)
-
-type SheetShellDragIndicatorProps = SheetDragIndicatorProps
-
-export default function SheetShellDragIndicator(props: SheetShellDragIndicatorProps) {
-  const classes = useStyles()
-
-  return <SheetDragIndicator {...props} classes={classes} />
-}

package/AppShell/SheetShellHeader/index.tsx

@@ -1,28 +0,0 @@
-import useSheetContext from '@graphcommerce/framer-sheet/hooks/useSheetContext'
-import { useElementScroll } from '@graphcommerce/framer-utils'
-import React from 'react'
-import AppShellHeader, { AppShellHeaderProps } from '../AppShellHeader'
-import useSheetStyles from '../SheetShellBase/useSheetStyles'
-import SheetShellDragIndicator from '../SheetShellDragIndicator'
-
-type SheetShellHeaderProps = {
-  hideDragIndicator?: boolean
-} & Omit<AppShellHeaderProps, 'scrollY'>
-
-export default function SheetShellHeader(props: SheetShellHeaderProps) {
-  const { hideDragIndicator } = props
-  const { contentRef } = useSheetContext()
-  const { y } = useElementScroll(contentRef)
-  const sheetClasses = useSheetStyles()
-
-  return (
-    <AppShellHeader
-      {...props}
-      scrollY={y}
-      dragIndicator={
-        hideDragIndicator ? undefined : <SheetShellDragIndicator classes={sheetClasses} />
-      }
-      sheet
-    />
-  )
-}

package/AppShell/ShellBase.tsx

@@ -1,45 +0,0 @@
-import { useTheme } from '@material-ui/core'
-import Head from 'next/head'
-import React from 'react'
-import PageLoadIndicator from '../PageLoadIndicator'
-
-export type PageLayoutBaseProps = { name: string; children?: React.ReactNode }
-
-const ShellBase = (props: { name: string; children?: React.ReactNode }) => {
-  const { children, name } = props
-  const theme = useTheme()
-
-  return (
-    <>
-      <PageLoadIndicator />
-      <Head>
-        <meta name='theme-color' content={theme.palette.background.default} key='theme-color' />
-        <meta
-          name='viewport'
-          content='minimum-scale=1, initial-scale=1, width=device-width'
-          key='viewport'
-        />
-        <meta name='application-name' content={name} key='application-name' />
-        <meta
-          name='apple-mobile-web-app-capable'
-          content='yes'
-          key='apple-mobile-web-app-capable'
-        />
-        <meta
-          name='apple-mobile-web-app-status-bar-style'
-          content='default'
-          key='apple-mobile-web-app-status-bar-style'
-        />
-        <meta name='apple-mobile-web-app-title' content={name} key='apple-mobile-web-app-title' />
-        <meta name='format-detection' content='telephone=no' key='format-detection' />
-        <meta name='mobile-web-app-capable' content='yes' key='mobile-web-app-capable' />
-        <link rel='apple-touch-icon' href='/manifest/icon-512-512.png' key='apple-touch-icon' />
-        <link rel='manifest' href='/manifest.webmanifest' key='manifest' />
-        <link rel='shortcut icon' href='/manifest/favicon.ico' key='shortcut icon' />
-      </Head>
-      {children}
-    </>
-  )
-}
-
-export default ShellBase

package/Debug/DebugSpacer.tsx

@@ -1,51 +0,0 @@
-import { makeStyles } from '@material-ui/core'
-import { CSSProperties } from '@material-ui/styles'
-import { AnimatePresence, HTMLMotionProps, m } from 'framer-motion'
-
-export type DebugSpacerProps = {
-  height?: number
-  color?: CSSProperties['color']
-} & HTMLMotionProps<'div'>
-
-const useStyles = makeStyles(() => ({
-  root: {
-    background: `repeating-linear-gradient(-45deg, transparent, transparent 20px, #f6f6f6 20px, #f6f6f6 40px) top left`,
-    boxShadow: `#eee 0px 0px 0px 3px inset`,
-    overflow: 'hidden',
-  },
-  div: {
-    color: `rgba(0,0,0,0.1)`,
-    overflow: 'hidden',
-    width: '100%',
-    textAlign: 'center',
-    fontSize: 20,
-    display: 'grid',
-    alignItems: 'center',
-  },
-}))
-export default function DebugSpacer({ height = 250, ...divProps }: DebugSpacerProps) {
-  const classes = useStyles()
-  let increment = 0
-  // eslint-disable-next-line no-return-assign
-  const rows = new Array(Math.ceil(height / 100)).fill(0).map(() => {
-    increment += 100
-    return Math.min(increment, height)
-  })
-
-  return (
-    <m.div className={classes.root} {...divProps} animate={{ height }}>
-      <AnimatePresence>
-        {rows.map((nr) => (
-          <div
-            data-key={`debug-row-${nr}`}
-            className={classes.div}
-            style={{ height: nr % 100 || 100, borderTop: `3px solid #efefef` }}
-            key={`debug-row-${nr}`}
-          >
-            {nr}
-          </div>
-        ))}
-      </AnimatePresence>
-    </m.div>
-  )
-}

package/FramerNextPagesSlider/Slide.tsx

@@ -1,71 +0,0 @@
-import { usePageContext, usePageRouter } from '@graphcommerce/framer-next-pages'
-import { SPRING_ANIM } from '@graphcommerce/framer-sheet'
-import { makeStyles } from '@material-ui/core'
-import { m, motionValue, useElementScroll } from 'framer-motion'
-import React, { useEffect, useRef } from 'react'
-import { ScrollPositions } from './types'
-
-const useStyles = makeStyles(
-  () => ({
-    slide: {
-      position: 'absolute',
-      left: 0,
-      top: 0,
-      right: 0,
-      height: '100%',
-      overflowY: 'auto',
-    },
-  }),
-  { name: 'FramerNextPagesSlider' },
-)
-
-type Custom = {
-  depth: number
-  direction: 1 | -1
-  exiting: boolean
-}
-
-export type RouterSlideProps = {
-  children?: React.ReactNode
-  scrollPositions: React.MutableRefObject<ScrollPositions>
-}
-
-export default function RouterSlide({ children, scrollPositions }: RouterSlideProps) {
-  const classes = useStyles()
-  const ref = useRef<HTMLDivElement>(null)
-  const { scrollY } = useElementScroll(ref)
-  const { direction, depth } = usePageContext()
-  const router = usePageRouter()
-
-  useEffect(() => {
-    scrollPositions.current[router.asPath] ??= motionValue(0)
-    scrollY.onChange((v) => scrollPositions.current[router.asPath].set(v))
-  }, [router.asPath, scrollPositions, scrollY])
-
-  useEffect(() => {
-    const scroll = scrollPositions.current[router.asPath].get()
-    if (ref.current && scroll) ref.current.scrollTop = scroll
-  }, [router.asPath, scrollPositions])
-
-  return (
-    <m.div
-      className={classes.slide}
-      ref={ref}
-      custom={{ depth, direction, exiting: false }}
-      initial='initial'
-      animate={{ x: 0 }}
-      exit='exit'
-      variants={{
-        initial: (c: Custom) => (c.direction === 1 ? { x: '100%' } : { x: '-100%' }),
-        exit: (c: Custom) => {
-          if (!c.depth && c.exiting && c.direction === 1) return { x: '-100%' }
-          if (!c.depth && c.exiting && c.direction === -1) return { x: '100%' }
-          return { x: 0 }
-        },
-      }}
-      transition={{ ...SPRING_ANIM, restDelta: 0.01, damping: 20 }}
-    >
-      {children}
-    </m.div>
-  )
-}

package/FramerNextPagesSlider/Slider.tsx

@@ -1,39 +0,0 @@
-import { usePageContext, usePageRouter } from '@graphcommerce/framer-next-pages'
-import { makeStyles } from '@material-ui/core'
-import { AnimatePresence } from 'framer-motion'
-import React, { useRef } from 'react'
-import RouterSlide from './Slide'
-import { ScrollPositions } from './types'
-
-const useStyles = makeStyles(
-  {
-    slider: {
-      position: 'relative',
-      width: '100%',
-      height: '100%',
-    },
-  },
-  { name: 'FramerNextPagesSlider' },
-)
-
-export type SliderRouteProps = { children?: React.ReactNode }
-
-/** RouteSlider provides an iOS settings style navigation */
-export default function Slider(props: SliderRouteProps) {
-  const classes = useStyles()
-  const { children } = props
-  const { depth, direction } = usePageContext()
-  const router = usePageRouter()
-
-  const scrollPositions = useRef<ScrollPositions>({})
-
-  return (
-    <div className={classes.slider}>
-      <AnimatePresence initial={false} custom={{ depth, direction, exiting: true }}>
-        <RouterSlide key={router.asPath} scrollPositions={scrollPositions}>
-          {children}
-        </RouterSlide>
-      </AnimatePresence>
-    </div>
-  )
-}

package/FramerNextPagesSlider/index.ts

@@ -1 +0,0 @@
-export { default } from './Slider'

package/FramerNextPagesSlider/types.ts

@@ -1,3 +0,0 @@
-import { MotionValue } from 'framer-motion'
-
-export type ScrollPositions = { [key: string]: MotionValue<number> }