@graphcommerce/magento-category 4.3.1 → 4.5.0

package/CHANGELOG.md

@@ -1,5 +1,61 @@
 # Change Log
 
+## 4.5.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
+
+- [#1601](https://github.com/graphcommerce-org/graphcommerce/pull/1601) [`04708dacc`](https://github.com/graphcommerce-org/graphcommerce/commit/04708daccc213c6ea927bc67fa3bd0d5b1fad619) Thanks [@paales](https://github.com/paales)! - Navigation now uses a single `const selection = useNavigationSelection()` motionValue to control the state of the menu, to prevent excessive rerenders.
+
+* [#1590](https://github.com/graphcommerce-org/graphcommerce/pull/1590) [`ec96a0eb0`](https://github.com/graphcommerce-org/graphcommerce/commit/ec96a0eb049ee2204f32f9c578455cf9c131dbd2) Thanks [@paales](https://github.com/paales)! - Filtered category pages are now servered by a separate route with getServerSideProps. Since there are practically infinite variations of filters, it doesn't make sense to query those on a URL level and we're leveraging the backend caching possibilities.
+
+* Updated dependencies [[`b40a352f7`](https://github.com/graphcommerce-org/graphcommerce/commit/b40a352f7bccdb831dce1d45baf98d51b0921d58), [`04708dacc`](https://github.com/graphcommerce-org/graphcommerce/commit/04708daccc213c6ea927bc67fa3bd0d5b1fad619), [`bb94e7045`](https://github.com/graphcommerce-org/graphcommerce/commit/bb94e7045460cb671c45d612a0833731d7c20c30), [`b0dc4e2e1`](https://github.com/graphcommerce-org/graphcommerce/commit/b0dc4e2e1982d502d38dd50a0f493396360a7a15), [`4a5286dfe`](https://github.com/graphcommerce-org/graphcommerce/commit/4a5286dfeaa1719e594a0078f274fbab53969c4e), [`40983df17`](https://github.com/graphcommerce-org/graphcommerce/commit/40983df170ed0435c47496285dfe30aafeb2eeac), [`d46d5ed0c`](https://github.com/graphcommerce-org/graphcommerce/commit/d46d5ed0cc5794391b7527fc17bbb68ec2212e33), [`5f781a217`](https://github.com/graphcommerce-org/graphcommerce/commit/5f781a217ce63ed56bc1a9983487b04400a8a315), [`ec96a0eb0`](https://github.com/graphcommerce-org/graphcommerce/commit/ec96a0eb049ee2204f32f9c578455cf9c131dbd2)]:
+  - @graphcommerce/magento-product@4.5.0
+  - @graphcommerce/next-ui@4.22.0
+  - @graphcommerce/magento-store@4.2.28
+  - @graphcommerce/framer-scroller@2.1.33
+  - @graphcommerce/graphql@3.4.7
+  - @graphcommerce/image@3.1.9
+
+## 4.4.1
+
+### Patch Changes
+
+- Updated dependencies [[`1f7ee6f6c`](https://github.com/graphcommerce-org/graphcommerce/commit/1f7ee6f6cfb28544439ed36e10929ac530d1b2b7), [`707dbc73d`](https://github.com/graphcommerce-org/graphcommerce/commit/707dbc73d181204d88fdbbd2e09340e25b2b5f7b)]:
+  - @graphcommerce/next-ui@4.21.0
+  - @graphcommerce/graphql@3.4.6
+  - @graphcommerce/framer-scroller@2.1.32
+  - @graphcommerce/magento-product@4.4.25
+  - @graphcommerce/magento-store@4.2.27
+  - @graphcommerce/image@3.1.8
+
+## 4.4.0
+
+### Minor Changes
+
+- [#1591](https://github.com/graphcommerce-org/graphcommerce/pull/1591) [`eee08c956`](https://github.com/graphcommerce-org/graphcommerce/commit/eee08c956fbcc4fe8d915b6fa8b399dafca69acd) Thanks [@ErwinOtten](https://github.com/ErwinOtten)! - Remove need for rootCategory query
+
+* [#1591](https://github.com/graphcommerce-org/graphcommerce/pull/1591) [`79f057889`](https://github.com/graphcommerce-org/graphcommerce/commit/79f057889847c61d75db7f567fd6575a57cf1022) Thanks [@ErwinOtten](https://github.com/ErwinOtten)! - Remove need for query rootCategory
+
+### Patch Changes
+
+- [#1596](https://github.com/graphcommerce-org/graphcommerce/pull/1596) [`3a619b70d`](https://github.com/graphcommerce-org/graphcommerce/commit/3a619b70d082804b8de46a8e8232f9431479a8b7) Thanks [@paales](https://github.com/paales)! - Make sure the canonical of a page doesn’t contain a double forward slash
+
+- Updated dependencies [[`43822fd61`](https://github.com/graphcommerce-org/graphcommerce/commit/43822fd61c949215b8ddce9fb37d09f29b638426), [`3a619b70d`](https://github.com/graphcommerce-org/graphcommerce/commit/3a619b70d082804b8de46a8e8232f9431479a8b7)]:
+  - @graphcommerce/next-ui@4.20.0
+  - @graphcommerce/framer-scroller@2.1.31
+  - @graphcommerce/magento-product@4.4.24
+  - @graphcommerce/magento-store@4.2.26
+
 ## 4.3.1
 
 ### Patch Changes

package/components/CategoryChildren/CategoryChildren.tsx

@@ -40,16 +40,14 @@ export function CategoryChildren(props: CategoryChildrenProps) {
           {children.map((cat) => {
             if (!cat?.url_path || !cat.name || !cat.include_in_menu) return null
 
-            const linkParams = cloneDeep(params)
-            linkParams.url = cat.url_path
-            delete linkParams.currentPage
-
             return (
               <ProductListLink
                 key={cat.url_path}
                 underline='none'
                 color='inherit'
-                {...linkParams}
+                url={cat.url_path}
+                filters={{ category_uid: { eq: cat.uid } }}
+                sort={params.sort}
                 className={classes.link}
                 sx={(theme) => ({
                   whiteSpace: 'nowrap',

package/components/CategoryHeroNav/CategoryHeroNav.tsx

@@ -1,5 +1,5 @@
 import { ProductListLink } from '@graphcommerce/magento-product'
-import { responsiveVal, Row, extendableComponent } from '@graphcommerce/next-ui'
+import { responsiveVal, breakpointVal, Row, extendableComponent } from '@graphcommerce/next-ui'
 import { Box, SxProps, Theme, Typography } from '@mui/material'
 import React from 'react'
 import { CategoryHeroNavFragment } from './CategoryHeroNav.gql'
@@ -33,7 +33,6 @@ export function CategoryHeroNav({ children, title, asset, sx = [] }: CategoryHer
           marginBottom: theme.spacings.xxl,
           paddingBottom: theme.page.vertical,
           [theme.breakpoints.up('md')]: {
-            rowGap: theme.spacings.md,
             width: '100%',
             paddingRight: theme.page.horizontal,
             paddingTop: 0,
@@ -117,7 +116,12 @@ export function CategoryHeroNav({ children, title, asset, sx = [] }: CategoryHer
           '& video': {
             objectFit: 'cover',
             width: '100%',
-            borderRadius: responsiveVal(theme.shape.borderRadius * 2, theme.shape.borderRadius * 3),
+            ...breakpointVal(
+              'borderRadius',
+              theme.shape.borderRadius * 2,
+              theme.shape.borderRadius * 3,
+              theme.breakpoints.values,
+            ),
           },
           [theme.breakpoints.up('md')]: {
             minHeight: '80vh',

package/components/CategoryMeta/CategoryMeta.graphql

@@ -1,5 +1,4 @@
 fragment CategoryMeta on CategoryTree {
-  uid
   name
   meta_title
   meta_description

package/components/CategoryMeta/CategoryMeta.tsx

@@ -5,13 +5,10 @@ import { i18n } from '@lingui/core'
 import { CategoryMetaFragment } from './CategoryMeta.gql'
 
 export type CategoryMetaProps = CategoryMetaFragment &
-  Partial<PageMetaProps> & {
-    params?: ProductListParams
-    current_page?: number | null | undefined
-  }
+  Partial<PageMetaProps> & { params?: ProductListParams }
 
 export function CategoryMeta(props: CategoryMetaProps) {
-  const { meta_title, meta_description, name, params, current_page } = props
+  const { meta_title, meta_description, name, params } = props
   let {
     title = meta_title ?? name ?? '',
     metaDescription = meta_description ?? undefined,
@@ -21,8 +18,8 @@ export function CategoryMeta(props: CategoryMetaProps) {
 
   if (params?.url && !canonical) canonical = `/${params.url}`
 
-  // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
-  const anyFilterActive = Object.keys(params?.filters ?? {}).length > 0
+  const anyFilterActive =
+    Object.keys(params?.filters ?? {}).filter((k) => k !== 'category_uid').length > 0
   const currentPage = params?.currentPage ?? 1
   const isPaginated = currentPage > 1 && !anyFilterActive
 

package/index.ts

@@ -3,5 +3,5 @@ export * from './components/CategoryDescription/CategoryDescription'
 export * from './components/CategoryHeroNav/CategoryHeroNav'
 export * from './components/CategoryHeroNav/CategoryHeroNavTitle'
 export * from './components/CategoryMeta/CategoryMeta'
-export * from './hooks/useMagentoMenuToNavigation'
+export * from './utils/magentoMenuToNavigation'
 export * from './queries/getCategoryStaticPaths'

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/magento-category",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "4.3.1",
+  "version": "4.5.0",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "eslintConfig": {
@@ -12,19 +12,19 @@
     }
   },
   "devDependencies": {
-    "@graphcommerce/eslint-config-pwa": "^4.1.9",
+    "@graphcommerce/eslint-config-pwa": "^4.1.10",
     "@graphcommerce/prettier-config-pwa": "^4.0.6",
     "@graphcommerce/typescript-config-pwa": "^4.0.4",
     "@playwright/test": "^1.21.1",
     "type-fest": "^2.12.2"
   },
   "dependencies": {
-    "@graphcommerce/framer-scroller": "2.1.30",
-    "@graphcommerce/graphql": "3.4.5",
-    "@graphcommerce/image": "3.1.7",
-    "@graphcommerce/magento-product": "4.4.23",
-    "@graphcommerce/magento-store": "4.2.25",
-    "@graphcommerce/next-ui": "4.19.0"
+    "@graphcommerce/framer-scroller": "2.1.33",
+    "@graphcommerce/graphql": "3.4.7",
+    "@graphcommerce/image": "3.1.9",
+    "@graphcommerce/magento-product": "4.5.0",
+    "@graphcommerce/magento-store": "4.2.28",
+    "@graphcommerce/next-ui": "4.22.0"
   },
   "peerDependencies": {
     "@lingui/react": "^3.13.2",

package/queries/GetCategoryStaticPaths.graphql

@@ -1,5 +1,5 @@
-query GetCategoryStaticPaths($rootCategory: String!) {
-  categories(filters: { parent_category_uid: { eq: $rootCategory } }) {
+query GetCategoryStaticPaths {
+  categories {
     items {
       uid
       url_path

package/queries/MenuQueryFragment.graphql

@@ -1,6 +1,7 @@
 fragment MenuQueryFragment on Query {
-  menu: categories(filters: { parent_category_uid: { eq: $rootCategory } }) {
+  menu: categories {
     items {
+      uid
       ...NavigationItem
       children {
         uid
@@ -8,6 +9,10 @@ fragment MenuQueryFragment on Query {
         children {
           uid
           ...NavigationItem
+          children {
+            uid
+            ...NavigationItem
+          }
         }
       }
     }

package/queries/getCategoryStaticPaths.ts

@@ -12,12 +12,8 @@ const getCategoryStaticPaths = async (
   client: ApolloClient<NormalizedCacheObject>,
   locale: string,
 ) => {
-  const rootCategory =
-    (await client.query({ query: StoreConfigDocument })).data.storeConfig?.root_category_uid ?? ''
-
   const { data } = await client.query({
     query: GetCategoryStaticPathsDocument,
-    variables: { rootCategory },
   })
 
   const paths: StaticPathsResult['paths'] = []

package/{hooks/useMagentoMenuToNavigation.ts → utils/magentoMenuToNavigation.ts}

@@ -13,7 +13,7 @@ export function categoryToNav(props: Item | null | undefined): NavigationNode |
   if (!props) return undefined
   const { uid, children, include_in_menu, name, url_path } = props
 
-  if (!uid || include_in_menu !== 1 || !url_path || !name) return undefined
+  if (!uid || include_in_menu !== 1 || !name) return undefined
 
   // If we've got children we make a button that navigates to childitems.
   if (children && children.length > 0) {
@@ -21,7 +21,15 @@ export function categoryToNav(props: Item | null | undefined): NavigationNode |
       name,
       id: uid,
       childItems: [
-        { name: i18n._(/* i18n */ 'All {name}', { name }), href: `/${url_path}`, id: `${uid}-all` },
+        ...(url_path
+          ? [
+              {
+                name: i18n._(/* i18n */ 'All {name}', { name }),
+                href: `/${url_path}`,
+                id: `${uid}-all`,
+              },
+            ]
+          : []),
         ...children.map(categoryToNav).filter(nonNullable),
       ],
     } as NavigationNodeButton
@@ -35,6 +43,18 @@ export function categoryToNav(props: Item | null | undefined): NavigationNode |
  * Converts the Magento GraphQL category tree to a NavigationNode tree, which can be used in the
  * Navigation component.
  */
-export function useMagentoMenuToNavigation(menu: MenuQueryFragment['menu']) {
-  return (menu?.items ?? []).map(categoryToNav).filter(nonNullable)
+export function magentoMenuToNavigation(menu: MenuQueryFragment['menu'], includeRoot: boolean) {
+  return ((includeRoot ? menu?.items : menu?.items?.[0]?.children) || [])
+    .map(categoryToNav)
+    .filter(nonNullable)
+}
+
+/**
+ * Converts the Magento GraphQL category tree to a NavigationNode tree, which can be used in the
+ * Navigation component.
+ *
+ * @deprecated Please use magentoMenuToNavigation instead.
+ */
+export function useMagentoMenuToNavigation(menu: MenuQueryFragment['menu'], includeRoot: boolean) {
+  return magentoMenuToNavigation(menu, includeRoot)
 }