@graphcommerce/magento-category 4.4.1 → 4.5.0

package/CHANGELOG.md

@@ -1,5 +1,31 @@
 # 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

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.4.1",
+  "version": "4.5.0",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "eslintConfig": {
@@ -19,12 +19,12 @@
     "type-fest": "^2.12.2"
   },
   "dependencies": {
-    "@graphcommerce/framer-scroller": "2.1.32",
-    "@graphcommerce/graphql": "3.4.6",
-    "@graphcommerce/image": "3.1.8",
-    "@graphcommerce/magento-product": "4.4.25",
-    "@graphcommerce/magento-store": "4.2.27",
-    "@graphcommerce/next-ui": "4.21.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/{hooks/useMagentoMenuToNavigation.ts → utils/magentoMenuToNavigation.ts}

@@ -43,8 +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'], includeRoot: boolean) {
+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)
+}