@graphcommerce/framer-next-pages 3.2.3 → 3.3.0

package/CHANGELOG.md

@@ -1,5 +1,37 @@
 # Change Log
 
+## 3.3.0
+
+### Minor Changes
+
+- [#1602](https://github.com/graphcommerce-org/graphcommerce/pull/1602) [`5f781a217`](https://github.com/graphcommerce-org/graphcommerce/commit/5f781a217ce63ed56bc1a9983487b04400a8a315) Thanks [@ErwinOtten](https://github.com/ErwinOtten)! - Default styles and layout fixes
+
+  - Scaled icons and fonts down. Size in typography is now more gradual: https://graphcommerce.vercel.app/test/typography
+  - Multiple accessibility fixes. Missing button/input labels, and fixed spacing issues resulting in high % appropriately sized tap targets
+  - Replaced responsiveVal usage with better performaning breakpointVal where possible
+  - All buttons are now Pill by default.
+  - Cleaned up checkout styles
+
+### Patch Changes
+
+- Updated dependencies [[`01372b918`](https://github.com/graphcommerce-org/graphcommerce/commit/01372b918a291e01cbf5db40edcb40fb1c2af313)]:
+  - @graphcommerce/framer-utils@3.2.0
+
+## 3.2.5
+
+### Patch Changes
+
+- Updated dependencies [[`707dbc73d`](https://github.com/graphcommerce-org/graphcommerce/commit/707dbc73d181204d88fdbbd2e09340e25b2b5f7b), [`5c5645e6e`](https://github.com/graphcommerce-org/graphcommerce/commit/5c5645e6eaf5314c063f05547707fcd4b34a8717)]:
+  - @graphcommerce/framer-utils@3.1.5
+
+## 3.2.4
+
+### Patch Changes
+
+- [#1552](https://github.com/graphcommerce-org/graphcommerce/pull/1552) [`18054c441`](https://github.com/graphcommerce-org/graphcommerce/commit/18054c441962ba750bed3acc39ab46c8d3a341ce) Thanks [@paales](https://github.com/paales)! - Updated to Next.js v12.2.2 and other packages and made compatible
+
+* [#1552](https://github.com/graphcommerce-org/graphcommerce/pull/1552) [`21886d6fa`](https://github.com/graphcommerce-org/graphcommerce/commit/21886d6fa64a48d9e932bfaf8d138c9b13c36e43) Thanks [@paales](https://github.com/paales)! - Fix page stacking and scroll restoration when navigating
+
 ## 3.2.3
 
 ### Patch Changes

package/components/Page.tsx

@@ -3,38 +3,39 @@ import { m, useIsPresent } from 'framer-motion'
 import React from 'react'
 import type { PageItem } from '../types'
 
-export type PageProps = Pick<PageItem, 'historyIdx'> & {
+export type PageProps = Pick<PageItem, 'routerKey'> & {
   active: boolean
   children: React.ReactNode
 }
 
-export function scrollPos(idx: number): { x: number; y: number } {
-  const scroll = global.window?.sessionStorage[`__next_scroll_${idx}`]
+export function scrollPos(key: string): { x: number; y: number } {
+  const scroll = global.window?.sessionStorage[`__next_scroll_${key}`]
   // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
   return scroll ? JSON.parse(scroll) : { x: 0, y: 0 }
 }
 
 export function Page(props: PageProps) {
-  const { active, historyIdx, children } = props
+  const { active, routerKey, children } = props
   const isPresent = useIsPresent()
 
   /** The active Page doesn't get any special treatment */
   let top: number | undefined
 
   /** If the Page isn't active, we offset the page */
-  if (!active) top = scrollPos(historyIdx).y * -1
+  if (!active) top = scrollPos(routerKey).y * -1
 
   /**
    * If the Page isn't present as a child of <AnimatePresence/>, but it is still present in the DOM,
    * we're navigating back, so we need to offset it.
    */
-  if (!isPresent) top = scrollPos(historyIdx).y
+  if (!isPresent) top = scrollPos(routerKey).y
 
   const position = active && isPresent ? 'absolute' : 'fixed'
   const zIndex = active ? 1 : undefined
 
   return (
     <m.div
+      layoutScroll
       style={{ position, top, zIndex, minHeight: clientSizeCssVar.y, left: 0, right: 0 }}
       // @ts-expect-error inert is not in the type definition yet
       inert={!active ? 'true' : undefined}

package/components/Pages.tsx

@@ -1,6 +1,7 @@
 import { clientSizeCssVar, useClientSizeCssVar } from '@graphcommerce/framer-utils'
 import { AnimatePresence, m } from 'framer-motion'
 import { requestIdleCallback, cancelIdleCallback } from 'next/dist/client/request-idle-callback'
+import { HistoryState, PrivateRouteInfo } from 'next/dist/shared/lib/router/router'
 import { AppPropsType } from 'next/dist/shared/lib/utils'
 import { NextRouter, Router } from 'next/router'
 import { useEffect, useRef, useState } from 'react'
@@ -44,14 +45,23 @@ function getPageInfo(router: NextRouter) {
 export function FramerNextPages(props: PagesProps) {
   const { router, Component, pageProps: incomingProps, fallback = '/', fallbackRoute = '/' } = props
 
+  // @ts-expect-error Key of the route is still private, should be fixed in https://github.com/vercel/next.js/pull/37192
+  // eslint-disable-next-line no-underscore-dangle
+  const key = router._key as string
+
   useClientSizeCssVar()
   const items = useRef<PageItem[]>([])
-  const idx = Number(global.window?.history.state?.idx ?? 0)
+
+  const routerKeys = items.current.map((item) => item.routerKey)
+  if (routerKeys.indexOf(key) === -1) routerKeys.push(key)
+  const idx = routerKeys.indexOf(key)
+
   const prevHistory = useRef<number>(-1)
-  const [fb, setFallback] = useState<PageItem>()
   const direction = idx > prevHistory.current ? 1 : -1
   prevHistory.current = idx
 
+  const [fb, setFallback] = useState<PageItem>()
+
   /** We never need to render anything beyong the current idx and we can safely omit everything */
   items.current = items.current.slice(0, idx + 1)
 
@@ -76,6 +86,7 @@ export function FramerNextPages(props: PagesProps) {
       sharedKey: Component.pageOptions?.sharedKey?.(pageInfo) ?? pageInfo.pathname,
       overlayGroup: Component.pageOptions?.overlayGroup,
       historyIdx: idx,
+      routerKey: key,
       routerContext: {
         pageInfo,
         prevPage: items.current[idx - 1]?.routerContext,
@@ -102,16 +113,23 @@ export function FramerNextPages(props: PagesProps) {
         // todo: implement fallback loading for up property
         // const up = items.current[0].PageComponent.pageOptions?.up?.href ?? '/'
         const up = '/'
-        const info = await (router as Router).getRouteInfo(
-          fallbackRoute,
-          fallback,
-          {},
-          fallback,
-          fallback,
-          { shallow: false },
-          router.locale,
-          false,
-        )
+        const info = await (router as Router).getRouteInfo({
+          route: fallbackRoute,
+          pathname: fallback,
+          query: {},
+          as: fallback,
+          resolvedAs: fallback,
+          routeProps: { shallow: false },
+          locale: router.locale,
+          hasMiddleware: false,
+          isPreview: false,
+        })
+
+        const isPrivateRouteInfo = (
+          infoResult: Awaited<ReturnType<Router['getRouteInfo']>>,
+        ): infoResult is PrivateRouteInfo => 'Component' in infoResult
+
+        if (!isPrivateRouteInfo(info)) return
 
         const pageInfo = { asPath: up, pathname: up, locale: router.locale, query: {} }
         const Fallback = info.Component as PageComponent
@@ -122,6 +140,7 @@ export function FramerNextPages(props: PagesProps) {
           sharedKey: Fallback.pageOptions?.sharedKey?.(pageInfo) ?? pageInfo.pathname,
           overlayGroup: Fallback.pageOptions?.overlayGroup,
           historyIdx: -1,
+          routerKey: 'fallback',
           routerContext: {
             pageInfo,
             up: Fallback.pageOptions?.up ?? info.props?.pageProps?.up,
@@ -192,7 +211,7 @@ and pass it as a param in <FramerNextPages fallbackRoute='/[...url]' /> in your
       />
       <AnimatePresence initial={false}>
         {renderItems.map((item, itemIdx) => {
-          const { historyIdx, sharedKey, overlayGroup } = item
+          const { historyIdx, sharedKey, overlayGroup, routerKey } = item
           const active = itemIdx === renderItems.length - 1
           const depth = itemIdx - (renderItems.length - 1)
           const closeIdx = renderItems[itemIdx - 1]?.historyIdx ?? -1
@@ -204,9 +223,9 @@ and pass it as a param in <FramerNextPages fallbackRoute='/[...url]' /> in your
               key={sharedKey}
               // We're actually rerendering here but since the actual page renderer is memoized we can safely do this
               // eslint-disable-next-line react/jsx-no-constructed-context-values
-              value={{ depth, active, direction, closeSteps, backSteps, historyIdx, overlayGroup }}
+              value={{ depth, active, direction, closeSteps, backSteps, routerKey, overlayGroup }}
             >
-              <Page active={active} historyIdx={historyIdx}>
+              <Page active={active} routerKey={routerKey}>
                 <PageRenderer {...item} />
               </Page>
             </pageContext.Provider>

package/context/pageContext.ts

@@ -39,7 +39,7 @@ export type PageContext = {
   overlayGroup?: string
 
   /** @private */
-  historyIdx: number
+  routerKey: string
 }
 
 export const pageContext = createContext(undefined as unknown as PageContext)

package/hooks/useScrollOffsetY.ts

@@ -1,4 +1,5 @@
-import { useMemo } from 'react'
+import { useMotionValue } from 'framer-motion'
+import { useEffect, useMemo } from 'react'
 import { scrollPos } from '../components/Page'
 import { usePageContext } from './usePageContext'
 
@@ -7,8 +8,15 @@ import { usePageContext } from './usePageContext'
  * scroll based elements.
  */
 export function useScrollOffset() {
-  const { active, historyIdx } = usePageContext()
+  const { active, routerKey } = usePageContext()
+
+  const scrolloffset = useMotionValue(0)
+
+  useEffect(() => {
+    if (active) scrolloffset.set(0)
+    else scrolloffset.set(scrollPos(routerKey).y)
+  }, [active, routerKey, scrolloffset])
 
   // When the page is rendered in the background we should use it's scroll offset while rendering
-  return useMemo(() => (active ? { x: 0, y: 0 } : scrollPos(historyIdx)), [active, historyIdx])
+  return scrolloffset
 }

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/framer-next-pages",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "3.2.3",
+  "version": "3.3.0",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "eslintConfig": {
@@ -12,12 +12,12 @@
     }
   },
   "dependencies": {
-    "@graphcommerce/framer-utils": "3.1.4"
+    "@graphcommerce/framer-utils": "3.2.0"
   },
   "devDependencies": {
-    "@graphcommerce/eslint-config-pwa": "^4.1.8",
+    "@graphcommerce/eslint-config-pwa": "^4.1.10",
     "@graphcommerce/prettier-config-pwa": "^4.0.6",
-    "@graphcommerce/typescript-config-pwa": "^4.0.2",
+    "@graphcommerce/typescript-config-pwa": "^4.0.4",
     "@playwright/test": "^1.21.1"
   },
   "peerDependencies": {

package/types.ts

@@ -80,9 +80,9 @@ export type PageOptions<T extends Record<string, unknown> = Record<string, unkno
    * FramerNextPages uses Framer Motion's <AnimatePresence/> to animate pages in and out. From the
    * [docs](https://www.framer.com/api/motion/animate-presence/#usage):
    *
-   * *In React, changing a component's key makes React treat it as an entirely new component. So the
+   * _In React, changing a component's key makes React treat it as an entirely new component. So the
    * old one is unmounted before the new one is mounted. So by changing the key of a single child of
-   * AnimatePresence, we can easily make animated page transitions! 🎉*
+   * AnimatePresence, we can easily make animated page transitions! 🎉_
    *
    * To create transitions we need to let React know if we should create a new component. We do this
    * by specifying a 'sharedKey'. By default this key is the same as the pathname:
@@ -143,6 +143,7 @@ export type PageItem = {
   routerOverride?: Partial<NextRouter>
   PageComponent: PageComponent
   historyIdx: number
+  routerKey: string
   sharedKey: string
   pageProps?: Record<string, unknown>
   routerContext: PageContext