@graphcommerce/magento-category 4.5.12 → 4.7.0

package/CHANGELOG.md

@@ -1,5 +1,30 @@
 # Change Log
 
+## 4.7.0
+
+### Minor Changes
+
+- [#1662](https://github.com/graphcommerce-org/graphcommerce/pull/1662) [`de8925aa9`](https://github.com/graphcommerce-org/graphcommerce/commit/de8925aa910b191c62041530c68c697a58a1e52d) Thanks [@paales](https://github.com/paales)! - Allow for a custom Component for magentoMenuToNavigation and allow React.ReactNode for items
+
+### Patch Changes
+
+- Updated dependencies [[`0c21c5c23`](https://github.com/graphcommerce-org/graphcommerce/commit/0c21c5c233ebab15f6629c234e3de1cc8c0452e1), [`de8925aa9`](https://github.com/graphcommerce-org/graphcommerce/commit/de8925aa910b191c62041530c68c697a58a1e52d), [`f5eae0afd`](https://github.com/graphcommerce-org/graphcommerce/commit/f5eae0afdbd474b1f81c450425ffadf2d025187a)]:
+  - @graphcommerce/next-ui@4.28.0
+  - @graphcommerce/framer-scroller@2.1.40
+  - @graphcommerce/magento-product@4.7.1
+  - @graphcommerce/magento-store@4.3.1
+
+## 4.6.0
+
+### Minor Changes
+
+- [#1659](https://github.com/graphcommerce-org/graphcommerce/pull/1659) [`6987ec7d2`](https://github.com/graphcommerce-org/graphcommerce/commit/6987ec7d21ce2d481fabbd6eda039702fcf5242b) Thanks [@Jessevdpoel](https://github.com/Jessevdpoel)! - Added product and category breadcrumbs
+
+### Patch Changes
+
+- Updated dependencies [[`6987ec7d2`](https://github.com/graphcommerce-org/graphcommerce/commit/6987ec7d21ce2d481fabbd6eda039702fcf5242b)]:
+  - @graphcommerce/magento-product@4.7.0
+
 ## 4.5.12
 
 ### Patch Changes

package/components/CategoryBreadcrumb/CategoryBreadcrumb.graphql

@@ -1,5 +1,8 @@
 fragment CategoryBreadcrumb on CategoryInterface {
   uid
+  name
+  url_path
+  include_in_menu
   breadcrumbs {
     category_uid
     category_name

package/components/CategoryBreadcrumb/CategoryBreadcrumb.tsx

@@ -0,0 +1,32 @@
+import { Trans } from '@lingui/react'
+import { Breadcrumbs, BreadcrumbsProps, Container, Link, Typography } from '@mui/material'
+import PageLink from 'next/link'
+import { CategoryBreadcrumbFragment } from './CategoryBreadcrumb.gql'
+
+type CategoryPageBreadcrumbsProps = CategoryBreadcrumbFragment & BreadcrumbsProps
+
+export function CategoryBreadcrumb(props: CategoryPageBreadcrumbsProps) {
+  const { breadcrumbs, name } = props
+  return (
+    <Container maxWidth={false}>
+      <Breadcrumbs>
+        <PageLink href='/' passHref>
+          <Link underline='hover' color='inherit'>
+            <Trans id='Home' />
+          </Link>
+        </PageLink>
+        {breadcrumbs?.map((mapped_category, i) => (
+          <Link
+            underline='hover'
+            key={mapped_category?.category_uid}
+            color='inherit'
+            href={`/${mapped_category?.category_url_path}`}
+          >
+            {mapped_category?.category_name}
+          </Link>
+        ))}
+        <Typography color='text.primary'>{name}</Typography>
+      </Breadcrumbs>
+    </Container>
+  )
+}

package/components/CategoryBreadcrumb/index.ts

@@ -0,0 +1,2 @@
+export * from './CategoryBreadcrumb'
+export * from './CategoryBreadcrumb.gql'

package/index.ts

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

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/magento-category",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "4.5.12",
+  "version": "4.7.0",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "eslintConfig": {
@@ -19,12 +19,12 @@
     "type-fest": "^2.12.2"
   },
   "dependencies": {
-    "@graphcommerce/framer-scroller": "2.1.39",
+    "@graphcommerce/framer-scroller": "2.1.40",
     "@graphcommerce/graphql": "3.4.8",
     "@graphcommerce/image": "3.1.9",
-    "@graphcommerce/magento-product": "4.6.1",
-    "@graphcommerce/magento-store": "4.3.0",
-    "@graphcommerce/next-ui": "4.27.0"
+    "@graphcommerce/magento-product": "4.7.1",
+    "@graphcommerce/magento-store": "4.3.1",
+    "@graphcommerce/next-ui": "4.28.0"
   },
   "peerDependencies": {
     "@lingui/react": "^3.13.2",

package/queries/NavigationItem.graphql

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

package/utils/magentoMenuToNavigation.tsx

@@ -0,0 +1,86 @@
+import {
+  NavigationNode,
+  NavigationNodeButton,
+  NavigationNodeHref,
+  NavigationNodeType,
+  nonNullable,
+} from '@graphcommerce/next-ui'
+import { i18n } from '@lingui/core'
+import { MenuQueryFragment } from '../queries/MenuQueryFragment.gql'
+import { NavigationItemFragment } from '../queries/NavigationItem.gql'
+
+type Item = NonNullable<NonNullable<NonNullable<MenuQueryFragment['menu']>['items']>[0]>
+
+export type MagentoNavigationItemProps = NavigationItemFragment
+
+function categoryToNav(
+  props: Item | null | undefined,
+  Component?: React.ComponentType<MagentoNavigationItemProps>,
+): NavigationNode | undefined {
+  if (!props) return undefined
+  const { uid, children, include_in_menu, name, url_path, level } = props
+
+  if (!uid || include_in_menu !== 1 || !name) return undefined
+
+  const allName = i18n._(/* i18n */ 'All {name}', { name })
+  // If we've got children we make a button that navigates to childitems.
+  if (children && children.length > 0) {
+    const button: NavigationNodeButton = {
+      type: NavigationNodeType.BUTTON,
+      href: url_path ? `/${url_path}` : undefined,
+      name: Component ? <Component key={uid} {...props} /> : name,
+      id: uid,
+      childItems: [
+        ...(url_path
+          ? [
+              {
+                name: Component ? (
+                  <Component key={uid} {...props} name={allName} level={(level ?? 0) + 1} />
+                ) : (
+                  allName
+                ),
+                href: `/${url_path}`,
+                id: `${uid}-all`,
+              },
+            ]
+          : []),
+        ...children.map((child) => categoryToNav(child, Component)).filter(nonNullable),
+      ],
+    }
+    return button
+  }
+
+  // If we've got no children we make a href.
+  return {
+    name: Component ? <Component key={uid} {...props} /> : 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.
+ *
+ * To provide a custom renderer to the navigation items, pass a component as the third argument;
+ *
+ * ```tsx
+ * function MagentoNavigationItem(props: MagentoNavigationItemProps) {
+ *   const { name, level } = props
+ *   return (
+ *     <>
+ *       {name} {level}
+ *     </>
+ *   )
+ * }
+ * ```
+ */
+export function magentoMenuToNavigation(
+  menu: MenuQueryFragment['menu'],
+  includeRoot: boolean,
+  Component?: React.ComponentType<MagentoNavigationItemProps>,
+) {
+  return ((includeRoot ? menu?.items : menu?.items?.[0]?.children) || [])
+    .map((child) => categoryToNav(child, Component))
+    .filter(nonNullable)
+}

package/utils/magentoMenuToNavigation.ts

@@ -1,60 +0,0 @@
-import {
-  NavigationNode,
-  NavigationNodeButton,
-  NavigationNodeHref,
-  nonNullable,
-} from '@graphcommerce/next-ui'
-import { i18n } from '@lingui/core'
-import { MenuQueryFragment } from '../queries/MenuQueryFragment.gql'
-
-export type Item = NonNullable<NonNullable<MenuQueryFragment['menu']>['items']>[0]
-
-export 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 || !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: [
-        ...(url_path
-          ? [
-              {
-                name: i18n._(/* i18n */ 'All {name}', { name }),
-                href: `/${url_path}`,
-                id: `${uid}-all`,
-              },
-            ]
-          : []),
-        ...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 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)
-}