@graphcommerce/magento-category 4.1.20 → 4.1.23

package/CHANGELOG.md

@@ -1,5 +1,39 @@
 # Change Log
 
+## 4.1.23
+
+### Patch Changes
+
+- Updated dependencies [[`18054c441`](https://github.com/graphcommerce-org/graphcommerce/commit/18054c441962ba750bed3acc39ab46c8d3a341ce), [`c5c539c44`](https://github.com/graphcommerce-org/graphcommerce/commit/c5c539c44eeac524cd62ce649e132d2e00333794), [`6f69bc54c`](https://github.com/graphcommerce-org/graphcommerce/commit/6f69bc54c6e0224452817c532ae58d9c332b61ea), [`21886d6fa`](https://github.com/graphcommerce-org/graphcommerce/commit/21886d6fa64a48d9e932bfaf8d138c9b13c36e43), [`b4936e961`](https://github.com/graphcommerce-org/graphcommerce/commit/b4936e96175fe80717895822e245274db05638bd)]:
+  - @graphcommerce/graphql@3.4.1
+  - @graphcommerce/next-ui@4.13.1
+  - @graphcommerce/framer-scroller@2.1.23
+  - @graphcommerce/magento-product@4.4.15
+  - @graphcommerce/magento-store@4.2.17
+
+## 4.1.22
+
+### Patch Changes
+
+- [#1522](https://github.com/graphcommerce-org/graphcommerce/pull/1522) [`8d8fda262`](https://github.com/graphcommerce-org/graphcommerce/commit/8d8fda2623e561cb43441110c67ffa34b692668a) Thanks [@ErwinOtten](https://github.com/ErwinOtten)! - Introducing a new Navigation component that builds on the existing navigation component and tries to address the 'mega menu' question where there are tons of categories that need to be navigated quickly.
+
+- Updated dependencies [[`8d8fda262`](https://github.com/graphcommerce-org/graphcommerce/commit/8d8fda2623e561cb43441110c67ffa34b692668a), [`d41cff721`](https://github.com/graphcommerce-org/graphcommerce/commit/d41cff7211230561ceeb7786cf75790efd6377cd), [`cefa7b365`](https://github.com/graphcommerce-org/graphcommerce/commit/cefa7b3652b55108d2178927e3c5d98a111cf373), [`584b683a2`](https://github.com/graphcommerce-org/graphcommerce/commit/584b683a2aedcdf5067644c8dcc0e63a5b9e894c)]:
+  - @graphcommerce/next-ui@4.13.0
+  - @graphcommerce/magento-store@4.2.16
+  - @graphcommerce/framer-scroller@2.1.22
+  - @graphcommerce/magento-product@4.4.14
+
+## 4.1.21
+
+### Patch Changes
+
+- Updated dependencies [[`5f927ebdc`](https://github.com/graphcommerce-org/graphcommerce/commit/5f927ebdc6f0331833e02b96e4f169bfe475ac6b), [`c756f42e5`](https://github.com/graphcommerce-org/graphcommerce/commit/c756f42e503761a497e4a5a7a02d02141df231c3)]:
+  - @graphcommerce/graphql@3.4.0
+  - @graphcommerce/next-ui@4.12.0
+  - @graphcommerce/magento-product@4.4.13
+  - @graphcommerce/magento-store@4.2.15
+  - @graphcommerce/framer-scroller@2.1.21
+
 ## 4.1.20
 
 ### Patch Changes

package/hooks/useMagentoMenuToNavigation.ts

@@ -0,0 +1,38 @@
+import { NavigationNode, NavigationNodeButton, NavigationNodeHref } from '@graphcommerce/next-ui'
+import { MenuQueryFragment } from '../queries/MenuQueryFragment.gql'
+
+function nonNullable<T>(value: T): value is NonNullable<T> {
+  return value !== null && value !== undefined
+}
+
+type Item = NonNullable<NonNullable<MenuQueryFragment['menu']>['items']>[0]
+
+function categoryToNav(props: Item | null | undefined): NavigationNode | undefined {
+  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 we've got children we make a button that navigates to childitems.
+  if (children && children.length > 0) {
+    return {
+      name,
+      id: uid,
+      childItems: [
+        { name: `All ${name}`, href: `/${url_path}` },
+        ...children.map(categoryToNav).filter(nonNullable),
+      ],
+    } as NavigationNodeButton
+  }
+
+  // If we've got no children we make a href.
+  return { name, id: uid, href: `/${url_path}` } as NavigationNodeHref
+}
+
+/**
+ * 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)
+}

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 './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.1.20",
+  "version": "4.1.23",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "eslintConfig": {
@@ -12,19 +12,19 @@
     }
   },
   "devDependencies": {
-    "@graphcommerce/eslint-config-pwa": "^4.1.8",
+    "@graphcommerce/eslint-config-pwa": "^4.1.9",
     "@graphcommerce/prettier-config-pwa": "^4.0.6",
-    "@graphcommerce/typescript-config-pwa": "^4.0.3",
+    "@graphcommerce/typescript-config-pwa": "^4.0.4",
     "@playwright/test": "^1.21.1",
     "type-fest": "^2.12.2"
   },
   "dependencies": {
-    "@graphcommerce/framer-scroller": "2.1.20",
-    "@graphcommerce/graphql": "3.3.0",
+    "@graphcommerce/framer-scroller": "2.1.23",
+    "@graphcommerce/graphql": "3.4.1",
     "@graphcommerce/image": "3.1.7",
-    "@graphcommerce/magento-product": "4.4.12",
-    "@graphcommerce/magento-store": "4.2.14",
-    "@graphcommerce/next-ui": "4.11.2"
+    "@graphcommerce/magento-product": "4.4.15",
+    "@graphcommerce/magento-store": "4.2.17",
+    "@graphcommerce/next-ui": "4.13.1"
   },
   "peerDependencies": {
     "@lingui/react": "^3.13.2",

package/queries/MenuQueryFragment.graphql

@@ -1,10 +1,15 @@
 fragment MenuQueryFragment on Query {
   menu: categories(filters: { parent_category_uid: { eq: $rootCategory } }) {
     items {
-      uid
-      name
-      url_path
-      include_in_menu
+      ...NavigationItem
+      children {
+        uid
+        ...NavigationItem
+        children {
+          uid
+          ...NavigationItem
+        }
+      }
     }
   }
 }

package/queries/NavigationItem.graphql

@@ -0,0 +1,7 @@
+fragment NavigationItem on CategoryTree {
+  uid
+  include_in_menu
+  name
+  url_path
+  children_count
+}