@graphcommerce/next-ui 3.1.4 → 3.2.0

package/ApolloError/ApolloErrorFullPage.tsx

@@ -11,15 +11,22 @@ export type ApolloErrorFullPageProps = {
 } & Omit<FullPageMessageProps, 'title' | 'description'>
 
 export default function ApolloErrorFullPage(props: ApolloErrorFullPageProps) {
-  const { error, graphqlErrorAlertProps, networkErrorAlertProps, ...fullPageMessageProps } = props
+  const {
+    error,
+    graphqlErrorAlertProps,
+    networkErrorAlertProps,
+    children,
+    ...fullPageMessageProps
+  } = props
 
   const singleError = error?.graphQLErrors.length === 1
 
   return (
     <FullPageMessage
       title={singleError ? error?.graphQLErrors[0].message : 'Several errors occured'}
-      description={singleError ? undefined : <ApolloErrorAlert error={error} />}
       {...fullPageMessageProps}
-    />
+    >
+      {singleError ? children : <ApolloErrorAlert error={error} />}
+    </FullPageMessage>
   )
 }

package/CHANGELOG.md

@@ -3,6 +3,52 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [3.2.0](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/next-ui@3.1.7...@graphcommerce/next-ui@3.2.0) (2021-10-09)
+
+
+### Bug Fixes
+
+* **framer-scroller:** pan snap does not work on mobile ([660f242](https://github.com/ho-nl/m2-pwa/commit/660f242a38558669fa896a74e14cafdd85069d57))
+* **framer-slider:** route changes ([4cadbea](https://github.com/ho-nl/m2-pwa/commit/4cadbea3e494326377e74e2fa9370ab80f8d8c35))
+* make sure the gallery never gets higher than 100% ([1eae8c7](https://github.com/ho-nl/m2-pwa/commit/1eae8c7cfb2a9e67f03f1e4e4db5c95213d2dbe0))
+* poistioning on mobile ([bec497f](https://github.com/ho-nl/m2-pwa/commit/bec497fca426346b80b453a3871b9c66521a2161))
+* **sidebar-gallery:** differentiate drag from click ([acd408e](https://github.com/ho-nl/m2-pwa/commit/acd408e400f8285e2b3a9105b4694d5fd839dd99))
+* **sidebar-gallery:** push gallery to history one time ([2c45b64](https://github.com/ho-nl/m2-pwa/commit/2c45b64e171577f7b584662d56416eeae4a22554))
+* **sidebar-gallery:** route handling ([1c3b8b1](https://github.com/ho-nl/m2-pwa/commit/1c3b8b1687b0bf637da6c88d2d9b30a734b98d11))
+* **sidebar-gallery:** use fullscreen and fullscreen exit icons ([1328d22](https://github.com/ho-nl/m2-pwa/commit/1328d220030f766be2d4046abd87d45175e4fe38))
+* use better URL handling and remove drag temporarily ([0b99387](https://github.com/ho-nl/m2-pwa/commit/0b993876280270320eef5301130c5cc3eb339ea9))
+
+
+### Features
+
+* **sidebar-gallery:** toggle with browser back buttons ([a2f804b](https://github.com/ho-nl/m2-pwa/commit/a2f804b0cedb98df8f6a7b197aeeeeda43c6b1ba))
+
+
+
+
+
+## [3.1.7](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/next-ui@3.1.6...@graphcommerce/next-ui@3.1.7) (2021-10-08)
+
+
+### Bug Fixes
+
+* SvgImageSimple should pass the layout prop ([a0b5c81](https://github.com/ho-nl/m2-pwa/commit/a0b5c818f93ba24a34c6ce8aa21f8af50bd05dd2))
+
+
+
+
+
+## [3.1.6](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/next-ui@3.1.5...@graphcommerce/next-ui@3.1.6) (2021-10-07)
+
+
+### Bug Fixes
+
+* Form component added classes attribute ([269fd46](https://github.com/ho-nl/m2-pwa/commit/269fd4629cedcaab74043604ac21a4557b4e514f))
+
+
+
+
+
 ## [3.1.4](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/next-ui@3.1.3...@graphcommerce/next-ui@3.1.4) (2021-10-06)
 
 

package/Form/index.tsx

@@ -46,7 +46,7 @@ export type DivFormProps = BaseFormProps & JSX.IntrinsicElements['div']
 
 export const FormDiv = React.forwardRef<HTMLDivElement, DivFormProps>((props, ref) => {
   const classes = useStyles(props)
-  const { contained, background = 'default', ...formProps } = props
+  const { contained, background = 'default', classes: _classes, ...formProps } = props
 
   return (
     <div

package/FramerScroller/components/SidebarGallery.tsx

@@ -1,3 +1,4 @@
+import { usePrevPageRouter } from '@graphcommerce/framer-next-pages/hooks/usePrevPageRouter'
 import {
   CenterSlide,
   MotionImageAspect,
@@ -10,18 +11,14 @@ import {
 import { clientSize, useMotionValueValue } from '@graphcommerce/framer-utils'
 import { Fab, makeStyles, Theme, useTheme } from '@material-ui/core'
 import clsx from 'clsx'
-import { m, useDomEvent } from 'framer-motion'
-import React, { useRef, useState } from 'react'
+import { m, useDomEvent, useMotionValue } from 'framer-motion'
+import { useRouter } from 'next/router'
+import React, { useEffect, useRef } 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'
+import { iconChevronLeft, iconChevronRight, iconFullscreen, iconFullscreenExit } from '../../icons'
 
 type StyleProps = {
   aspectRatio: [number, number]
@@ -42,7 +39,7 @@ const useStyles = makeStyles(
     rootZoomed: {
       position: 'relative',
       zIndex: theme.zIndex.modal,
-      marginTop: 0,
+      marginTop: `calc(${theme.page.headerInnerHeight.sm} * -1)`,
       [theme.breakpoints.up('md')]: {
         marginTop: `calc(${theme.page.headerInnerHeight.md} * -1  - ${theme.spacings.sm})`,
       },
@@ -79,8 +76,12 @@ const useStyles = makeStyles(
       gridAutoFlow: `column`,
       gridTemplateColumns: `repeat(100, 100%)`,
       gridTemplateRows: `100%`,
+      cursor: 'zoom-in',
     },
-
+    scrollerZoomed: ({ clientHeight }: StyleProps) => ({
+      height: clientHeight,
+      cursor: 'inherit',
+    }),
     sidebarWrapper: {
       boxSizing: 'content-box',
       display: 'grid',
@@ -163,27 +164,41 @@ 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] } = props
-  const [zoomed, setZoomed] = useState(false)
-
+  const { sidebar, images, aspectRatio = [1, 1], routeHash = 'gallery' } = props
+  const router = useRouter()
+  const prevRoute = usePrevPageRouter()
   const clientHeight = useMotionValueValue(clientSize.y, (y) => y)
   const classes = useStyles({ clientHeight, aspectRatio })
 
+  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 = () => {
-    setZoomed(!zoomed)
     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 clsxZoom = (key: string) => clsx(classes?.[key], zoomed && classes?.[`${key}Zoomed`])
-
   const theme = useTheme()
-
   const windowRef = useRef(typeof window !== 'undefined' ? window : null)
 
   const handleEscapeKey = (e: KeyboardEvent | Event) => {
@@ -194,6 +209,16 @@ export default function SidebarGallery(props: SidebarGalleryProps) {
     }
   }
 
+  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 (
@@ -206,7 +231,12 @@ export default function SidebarGallery(props: SidebarGalleryProps) {
             if (!zoomed) document.body.style.overflow = ''
           }}
         >
-          <Scroller className={clsxZoom('scroller')} hideScrollbar>
+          <Scroller
+            className={clsxZoom('scroller')}
+            hideScrollbar
+            onMouseDown={onMouseDownScroller}
+            onMouseUp={onMouseUpScroller}
+          >
             {images.map((image, idx) => (
               <CenterSlide key={typeof image.src === 'string' ? image.src : idx}>
                 <MotionImageAspect
@@ -225,11 +255,11 @@ export default function SidebarGallery(props: SidebarGalleryProps) {
             ))}
           </Scroller>
           <m.div layout className={classes.topRight}>
-            <Fab color='inherit' size='small' className={classes.toggleIcon} onClick={toggle}>
+            <Fab color='inherit' size='small' className={classes.toggleIcon} onMouseUp={toggle}>
               {!zoomed ? (
-                <SvgImage src={iconExpandVertical} alt='Zoom in' loading='eager' />
+                <SvgImage src={iconFullscreen} alt='Zoom in' loading='eager' size='small' />
               ) : (
-                <SvgImage src={iconCollapseVertical} alt='Zoom out' loading='eager' />
+                <SvgImage src={iconFullscreenExit} alt='Zoom out' loading='eager' size='small' />
               )}
             </Fab>
           </m.div>
@@ -248,6 +278,7 @@ export default function SidebarGallery(props: SidebarGalleryProps) {
             <ScrollerDots layout />
           </div>
         </m.div>
+
         <div className={clsxZoom('sidebarWrapper')}>
           <m.div layout className={clsxZoom('sidebar')}>
             {sidebar}

package/FramerScroller/components/SidebarSlider.tsx

@@ -1,4 +1,3 @@
-import { relative } from 'path/posix'
 import {
   Scroller,
   ScrollerButton,
@@ -8,9 +7,10 @@ import {
 import { Theme } from '@material-ui/core'
 import { makeStyles } from '@material-ui/styles'
 import React, { ReactNode } from 'react'
-import { SvgImageSimple, iconChevronLeft, iconChevronRight } from '../..'
 import { UseStyles } from '../../Styles'
 import responsiveVal from '../../Styles/responsiveVal'
+import SvgImageSimple from '../../SvgImage/SvgImageSimple'
+import { iconChevronLeft, iconChevronRight } from '../../icons'
 
 const useStyles = makeStyles(
   (theme: Theme) => ({
@@ -37,7 +37,6 @@ const useStyles = makeStyles(
       gridRowGap: theme.spacings.lg,
       alignContent: 'space-around',
       paddingRight: theme.page.horizontal,
-
       '& > *': {
         minWidth: responsiveVal(200, 400),
       },

package/FullPageMessage/index.tsx

@@ -1,67 +1,73 @@
 import { Container, Theme, Typography } from '@material-ui/core'
 import { makeStyles } from '@material-ui/styles'
+import clsx from 'clsx'
 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,
+      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,
     },
+    icon: {
+      height: responsiveVal(120, 180),
+    },
   }),
-  {
-    name: 'FullPageMessage',
-  },
+  { name: 'FullPageMessage' },
 )
 
 export type FullPageMessageProps = {
   icon: React.ReactNode
   title: React.ReactNode
-  description?: React.ReactNode
+  children?: React.ReactNode
   button?: React.ReactNode
   altButton?: React.ReactNode
+  disableMargin?: boolean
 }
 
 export default function FullPageMessage(props: FullPageMessageProps) {
-  const { icon, title, description, button, altButton } = props
+  const { icon, title, children, button, altButton, disableMargin = false } = props
   const classes = useStyles()
 
   return (
-    <div className={classes.root}>
+    <div className={clsx(classes.root, disableMargin || classes.rootMargin)}>
       <Container maxWidth='md' className={classes.innerContainer}>
-        <PageMeta title='Account' metaDescription='Account Dashboard' metaRobots={['noindex']} />
-        {icon}
+        <div className={classes.icon}>{icon}</div>
 
         <div className={classes.subject}>
-          <Typography component='h2' variant='h4'>
+          <Typography variant='h3' gutterBottom>
             {title}
           </Typography>
-          {description && (
-            <Typography component='p' variant='body1' className={classes.description}>
-              {description}
+          {children && (
+            <Typography component='div' variant='body1'>
+              {children}
             </Typography>
           )}
         </div>
 
-        <div>{button}</div>
-        <div className={classes.button}>{altButton}</div>
+        <div className={classes.button}>{button}</div>
+        <div className={classes.altButton}>{altButton}</div>
       </Container>
     </div>
   )

package/SvgImage/SvgImageSimple.tsx

@@ -42,14 +42,14 @@ type SvgImageSimpleProps = Omit<ImageProps, 'fixed'> & {
 }
 
 const SvgImageSimple = forwardRef<HTMLImageElement, SvgImageSimpleProps>((props, ref) => {
-  const { className, size = 'medium', muted, inverted, ...imageProps } = props
+  const { className, size = 'medium', muted, inverted, layout = 'fixed', ...imageProps } = props
   const classes = useStyles()
 
   return (
     <Image
       {...imageProps}
       ref={ref}
-      layout='fixed'
+      layout={layout}
       className={clsx(
         className,
         classes.image,

package/icons/icon_fullscreen.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z"/></svg>

package/icons/icon_fullscreen_exit.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M5 16h3v3h2v-5H5v2zm3-8H5v2h5V5H8v3zm6 11h2v-3h3v-2h-5v5zm2-11V5h-2v5h5V8h-3z"/></svg>

package/icons/index.tsx

@@ -12,11 +12,9 @@ export { default as iconChevronRight } from './icon_chevron_right.svg'
 export { default as iconChevronUp } from './icon_chevron_up.svg'
 export { default as iconClose } from './icon_close.svg'
 export { default as iconCloseCircle } from './icon_close_circle.svg'
-export { default as iconCollapseVertical } from './icon_collapse_vertical.svg'
 export { default as iconCustomerService } from './icon_customer_service.svg'
 export { default as iconEmail } from './icon_email.svg'
 export { default as iconEmailOutline } from './icon_email_outline.svg'
-export { default as iconExpandVertical } from './icon_expand_vertical.svg'
 export { default as iconHeart } from './icon_heart.svg'
 export { default as iconHome } from './icon_home.svg'
 export { default as iconId } from './icon_id.svg'
@@ -40,3 +38,5 @@ export { default as iconStar } from './icon_star.svg'
 export { default as iconStarFilledMuted } from './icon_star_filled_muted.svg'
 export { default as iconStarYellow } from './icon_star_yellow.svg'
 export { default as iconParty } from './icon_party.svg'
+export { default as iconFullscreenExit } from './icon_fullscreen_exit.svg'
+export { default as iconFullscreen } from './icon_fullscreen.svg'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@graphcommerce/next-ui",
-  "version": "3.1.4",
+  "version": "3.2.0",
   "author": "",
   "license": "MIT",
   "scripts": {
@@ -9,13 +9,13 @@
     "start": "next start"
   },
   "dependencies": {
-    "@apollo/client": "^3.3.21",
-    "@graphcommerce/framer-next-pages": "^2.106.5",
-    "@graphcommerce/framer-scroller": "^0.2.5",
-    "@graphcommerce/framer-sheet": "^2.105.4",
-    "@graphcommerce/framer-utils": "^2.103.4",
-    "@graphcommerce/graphql": "^2.103.4",
-    "@graphcommerce/image": "^2.104.5",
+    "@apollo/client": "^3.4.16",
+    "@graphcommerce/framer-next-pages": "^2.106.7",
+    "@graphcommerce/framer-scroller": "^0.2.8",
+    "@graphcommerce/framer-sheet": "^2.105.6",
+    "@graphcommerce/framer-utils": "^2.103.6",
+    "@graphcommerce/graphql": "^2.103.5",
+    "@graphcommerce/image": "^2.104.7",
     "@graphql-typed-document-node/core": "^3.1.0",
     "@material-ui/core": "^4.12.3",
     "@material-ui/lab": "^4.0.0-alpha.60",
@@ -35,11 +35,10 @@
   },
   "devDependencies": {
     "@graphcommerce/browserslist-config-pwa": "^3.0.1",
-    "@graphcommerce/eslint-config-pwa": "^3.0.4",
+    "@graphcommerce/eslint-config-pwa": "^3.0.5",
     "@graphcommerce/prettier-config-pwa": "^3.0.2",
     "@graphcommerce/typescript-config-pwa": "^3.1.0",
     "@playwright/test": "^1.15.0",
-    "@types/react": "^17.0.25",
     "@types/react-dom": "^17.0.9",
     "@types/react-is": "^17.0.2",
     "graphql-tag": "2.12.5",
@@ -56,5 +55,5 @@
       "project": "./tsconfig.json"
     }
   },
-  "gitHead": "3cdea8f8c2a7a717955e81634ffdf769a1317584"
+  "gitHead": "b3dd4c996ac571874bb03d0a5c16b2c37f41abcb"
 }

package/icons/icon_collapse_vertical.svg

@@ -1,11 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="32px" height="32px" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
-        <g id="arrow-bar-right" transform="translate(16.000000, 16.000000) scale(-1, 1) translate(-16.000000, -16.000000) translate(8.000000, 8.000000)" stroke="#000000" stroke-width="1.5">
-            <line x1="16" y1="8" x2="6" y2="8" id="Path"></line>
-            <line x1="16" y1="8" x2="12" y2="12" id="Path"></line>
-            <line x1="16" y1="8" x2="12" y2="4" id="Path"></line>
-            <line x1="1" y1="0" x2="1" y2="16" id="Path"></line>
-        </g>
-    </g>
-</svg>

package/icons/icon_expand_vertical.svg

@@ -1,11 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="32px" height="32px" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
-        <g id="arrow-bar-right" transform="translate(8.000000, 8.000000)" stroke="#000000" stroke-width="1.5">
-            <line x1="16" y1="8" x2="6" y2="8" id="Path"></line>
-            <line x1="16" y1="8" x2="12" y2="12" id="Path"></line>
-            <line x1="16" y1="8" x2="12" y2="4" id="Path"></line>
-            <line x1="1" y1="0" x2="1" y2="16" id="Path"></line>
-        </g>
-    </g>
-</svg>