@graphcommerce/magento-category 8.1.0-canary.9 → 9.0.0-canary.55

package/CHANGELOG.md

@@ -1,5 +1,110 @@
 # Change Log
 
+## 9.0.0-canary.55
+
+## 9.0.0-canary.54
+
+## 8.1.0-canary.53
+
+## 8.1.0-canary.52
+
+## 8.1.0-canary.51
+
+## 8.1.0-canary.50
+
+## 8.1.0-canary.49
+
+## 8.1.0-canary.48
+
+## 8.1.0-canary.47
+
+## 8.1.0-canary.46
+
+## 8.1.0-canary.45
+
+## 8.1.0-canary.44
+
+## 8.1.0-canary.43
+
+## 8.1.0-canary.42
+
+## 8.1.0-canary.41
+
+## 8.1.0-canary.40
+
+## 8.1.0-canary.39
+
+## 8.1.0-canary.38
+
+## 8.1.0-canary.37
+
+## 8.1.0-canary.36
+
+## 8.1.0-canary.35
+
+## 8.1.0-canary.34
+
+## 8.1.0-canary.33
+
+## 8.1.0-canary.32
+
+## 8.1.0-canary.31
+
+## 8.1.0-canary.30
+
+## 8.1.0-canary.29
+
+## 8.1.0-canary.28
+
+## 8.1.0-canary.27
+
+### Minor Changes
+
+- [#2273](https://github.com/graphcommerce-org/graphcommerce/pull/2273) [`77955c5`](https://github.com/graphcommerce-org/graphcommerce/commit/77955c56ac8633ab1c5e0f3ddb25e3a87236e2bb) - Improve Breadcrumbs on Category and Product pages
+  ([@Jessevdpoel](https://github.com/Jessevdpoel))
+
+- [#2273](https://github.com/graphcommerce-org/graphcommerce/pull/2273) [`aa56540`](https://github.com/graphcommerce-org/graphcommerce/commit/aa56540af91638c09e4c7a0a1648aaa6c5fa0afb) - If a category has no children, the sibling links will be shown on the category page.
+  ([@Jessevdpoel](https://github.com/Jessevdpoel))
+
+## 8.1.0-canary.26
+
+## 8.1.0-canary.25
+
+## 8.1.0-canary.24
+
+## 8.1.0-canary.23
+
+## 8.1.0-canary.22
+
+## 8.1.0-canary.21
+
+## 8.1.0-canary.20
+
+## 8.1.0-canary.19
+
+## 8.1.0-canary.18
+
+## 8.1.0-canary.17
+
+## 8.1.0-canary.16
+
+## 8.1.0-canary.15
+
+### Patch Changes
+
+- [#2267](https://github.com/graphcommerce-org/graphcommerce/pull/2267) [`9d5fd11`](https://github.com/graphcommerce-org/graphcommerce/commit/9d5fd11c7130612e80523608ab442976f3f5ddc5) - make the CategoryHeroNav fragment injectable and add image to the childeren
+  ([@carlocarels90](https://github.com/carlocarels90))
+
+## 8.1.0-canary.14
+
+## 8.1.0-canary.13
+
+## 8.1.0-canary.12
+
+## 8.1.0-canary.11
+
+## 8.1.0-canary.10
+
 ## 8.1.0-canary.9
 
 ## 8.1.0-canary.8

package/components/CategoryBreadcrumb/CategoryBreadcrumb.tsx

@@ -5,6 +5,9 @@ import { CategoryBreadcrumbFragment } from './CategoryBreadcrumb.gql'
 
 type CategoryPageBreadcrumbsProps = CategoryBreadcrumbFragment & Omit<BreadcrumbsProps, 'children'>
 
+/**
+ * @deprecated Please use CategoryBreadcrumbs
+ */
 export function CategoryBreadcrumb(props: CategoryPageBreadcrumbsProps) {
   const { breadcrumbs, name, ...breadcrumbsProps } = props
 

package/components/CategoryBreadcrumb/CategoryBreadcrumbs.tsx

@@ -0,0 +1,40 @@
+import {
+  Breadcrumbs,
+  BreadcrumbsJsonLd,
+  BreadcrumbsProps,
+  jsonLdBreadcrumb,
+} from '@graphcommerce/next-ui'
+import { useRouter } from 'next/router'
+import type { BreadcrumbList } from 'schema-dts'
+import { CategoryBreadcrumbFragment } from './CategoryBreadcrumb.gql'
+import { categoryToBreadcrumbs } from './categoryToBreadcrumbs'
+
+export type CategoryBreadcrumbsProps = Omit<BreadcrumbsProps, 'breadcrumbs'> & {
+  category?: CategoryBreadcrumbFragment
+}
+
+export function CategoryBreadcrumbs(props: CategoryBreadcrumbsProps) {
+  const { category, sx, ...breadcrumbsProps } = props
+  const router = useRouter()
+
+  if (!category) return null
+
+  const breadcrumbs = categoryToBreadcrumbs(category)
+
+  return (
+    <>
+      <BreadcrumbsJsonLd<BreadcrumbList>
+        breadcrumbs={breadcrumbs}
+        render={(bc) => ({
+          '@context': 'https://schema.org',
+          ...jsonLdBreadcrumb(bc, router),
+        })}
+      />
+      <Breadcrumbs
+        breadcrumbs={breadcrumbs}
+        {...breadcrumbsProps}
+        sx={[...(Array.isArray(sx) ? sx : [sx])]}
+      />
+    </>
+  )
+}

package/components/CategoryBreadcrumb/categoryToBreadcrumbs.ts

@@ -0,0 +1,30 @@
+import { productListLink } from '@graphcommerce/magento-product'
+import { BreadcrumbsType, filterNonNullableKeys } from '@graphcommerce/next-ui'
+import { CategoryBreadcrumbFragment } from './CategoryBreadcrumb.gql'
+
+export function categoryToBreadcrumbs(
+  category: CategoryBreadcrumbFragment,
+): BreadcrumbsType['breadcrumbs'] {
+  if (!category.url_path || !category.name) return []
+
+  return [
+    ...filterNonNullableKeys(category.breadcrumbs, [
+      'category_level',
+      'category_name',
+      'category_url_path',
+    ])
+      .sort((a, b) => a.category_level - b.category_level)
+      .map(({ category_url_path, category_name }) => ({
+        href: productListLink({ url: category_url_path, filters: {}, sort: {} }),
+        name: category_name,
+      })),
+    {
+      href: productListLink({
+        url: category.url_path,
+        filters: {},
+        sort: {},
+      }),
+      name: category.name,
+    },
+  ]
+}

package/components/CategoryBreadcrumb/index.ts

@@ -1,2 +1,4 @@
-export * from './CategoryBreadcrumb'
 export * from './CategoryBreadcrumb.gql'
+export * from './CategoryBreadcrumb'
+export * from './CategoryBreadcrumbs'
+export * from './categoryToBreadcrumbs'

package/components/CategoryChildren/CategoryChildren.graphql

@@ -1,10 +1,6 @@
 fragment CategoryChildren on CategoryTree {
   uid
   children {
-    uid
-    name
-    level
-    url_path
-    include_in_menu
+    ...NavigationItem
   }
 }

package/components/CategoryChildren/CategoryChildren.tsx

@@ -1,7 +1,6 @@
 import { Scroller, ScrollerProvider } from '@graphcommerce/framer-scroller'
-import { ProductListParams } from '@graphcommerce/magento-product'
-import { productListLink } from '@graphcommerce/magento-product/hooks/useProductListLink'
-import { extendableComponent } from '@graphcommerce/next-ui'
+import { ProductListParams, productListLink } from '@graphcommerce/magento-product'
+import { extendableComponent, filterNonNullableKeys } from '@graphcommerce/next-ui'
 import { Box, Link, SxProps, Theme } from '@mui/material'
 import { CategoryChildrenFragment } from './CategoryChildren.gql'
 
@@ -17,75 +16,74 @@ const { classes } = extendableComponent(name, parts)
 export function CategoryChildren(props: CategoryChildrenProps) {
   const { children, params, sx = [] } = props
 
-  const { currentPage, ...paramsWithoutCurrentPage } = params
+  const childItems = filterNonNullableKeys(children, ['url_path', 'name', 'include_in_menu']).map(
+    (category) => ({
+      name: category.name,
+      href: productListLink({
+        ...params,
+        currentPage: 0,
+        url: category.url_path,
+        filters: { category_uid: { eq: category.uid } },
+      }),
+      active: params.url === category.url_path,
+    }),
+  )
 
-  if (!children || children.length === 0) return null
+  const hasNavigatableChildren = childItems.some((cat) => !cat.active)
+  if (!hasNavigatableChildren) return null
 
   return (
     <ScrollerProvider scrollSnapAlign='none'>
       <Box
         className={classes.container}
-        sx={[
-          (theme) => ({
-            display: 'flex',
-            justifyContent: 'center',
-            marginBottom: theme.spacings.sm,
-          }),
-          ...(Array.isArray(sx) ? sx : [sx]),
-        ]}
+        sx={[{ display: 'flex' }, ...(Array.isArray(sx) ? sx : [sx])]}
       >
         <Scroller
           className={classes.scroller}
           hideScrollbar
-          sx={{ gridAutoColumns: `max-content` }}
+          sx={(theme) => ({
+            gridAutoColumns: `max-content`,
+            columnGap: theme.spacings.sm,
+            marginBottom: '-8px',
+          })}
         >
-          {children.map((cat) => {
-            if (!cat?.url_path || !cat.name || !cat.include_in_menu) return null
-
-            return (
-              <Link
-                key={cat.url_path}
-                underline='none'
-                color='inherit'
-                href={productListLink({
-                  ...paramsWithoutCurrentPage,
-                  url: cat.url_path,
-                  filters: { category_uid: { eq: cat.uid } },
-                })}
-                className={classes.link}
-                sx={(theme) => ({
-                  whiteSpace: 'nowrap',
-                  display: 'block',
-                  marginRight: `${theme.spacings.xxs}`,
-                  marginLeft: `${theme.spacings.xxs}`,
-                  typography: 'h6',
-                  position: 'relative',
-                  paddingBottom: '8px',
+          {childItems.map((category) => (
+            <Link
+              key={category.href}
+              underline='none'
+              color='inherit'
+              href={category.href}
+              className={classes.link}
+              sx={(theme) => ({
+                whiteSpace: 'nowrap',
+                display: 'block',
+                typography: 'h6',
+                position: 'relative',
+                paddingBottom: '8px',
+                '&:before': {
+                  content: '""',
+                  width: 40,
+                  height: 2,
+                  background: theme.palette.primary.main,
+                  position: 'absolute',
+                  left: 0,
+                  right: 0,
+                  margin: '0 auto',
+                  opacity: category.active ? 1 : 0,
+                  transition: 'opacity .2s ease, bottom .2s ease',
+                  bottom: category.active ? 5 : 0,
+                },
+                '&:hover': {
                   '&:before': {
-                    content: '""',
-                    width: 40,
-                    height: 2,
-                    background: theme.palette.primary.main,
-                    position: 'absolute',
-                    left: 0,
-                    right: 0,
-                    margin: '0 auto',
-                    opacity: 0,
-                    transition: 'opacity .2s ease, bottom .2s ease',
-                    bottom: 0,
+                    opacity: 1,
+                    bottom: 5,
                   },
-                  '&:hover': {
-                    '&:before': {
-                      opacity: 1,
-                      bottom: 5,
-                    },
-                  },
-                })}
-              >
-                {cat.name}
-              </Link>
-            )
-          })}
+                },
+              })}
+            >
+              {category.name}
+            </Link>
+          ))}
         </Scroller>
       </Box>
     </ScrollerProvider>

package/components/CategoryChildren/CategorySiblings.graphql

@@ -0,0 +1,7 @@
+query CategorySiblings($parentUid: String!) {
+  categories(filters: { parent_category_uid: { eq: $parentUid } }) {
+    items {
+      ...NavigationItem
+    }
+  }
+}

package/components/CategoryDescription/CategoryDescription.graphql

@@ -1,4 +1,4 @@
-fragment CategoryDescription on CategoryTree @injectable {
+fragment CategoryDescription on CategoryTree {
   uid
   description
   name

package/components/CategoryDescription/CategoryDescription.tsx

@@ -2,16 +2,32 @@ import { extendableComponent } from '@graphcommerce/next-ui'
 import { Box, SxProps, Theme } from '@mui/material'
 import { CategoryDescriptionFragment } from './CategoryDescription.gql'
 
-export type CategoryDescriptionProps = Omit<CategoryDescriptionFragment, 'uid'> & {
-  sx?: SxProps<Theme>
+type StateProps = {
+  textAlignSm?: 'start' | 'center'
+  textAlignMd?: 'start' | 'center'
 }
-
-const cmpName = 'CategoryDescription' as const
+const componentName = 'CategoryDescription' as const
 const parts = ['root'] as const
-const { classes } = extendableComponent(cmpName, parts)
+const { withState } = extendableComponent<StateProps, typeof componentName, typeof parts>(
+  componentName,
+  parts,
+)
+
+export type CategoryDescriptionProps = Omit<CategoryDescriptionFragment, 'uid'> &
+  StateProps & { sx?: SxProps<Theme> }
 
 export function CategoryDescription(props: CategoryDescriptionProps) {
-  const { name, description, display_mode, sx = [], ...divProps } = props
+  const {
+    name,
+    description,
+    display_mode,
+    sx = [],
+    textAlignSm = 'center',
+    textAlignMd = 'center',
+    ...divProps
+  } = props
+
+  const classes = withState({ textAlignSm, textAlignMd })
 
   return description ? (
     // eslint-disable-next-line react/no-danger
@@ -21,12 +37,20 @@ export function CategoryDescription(props: CategoryDescriptionProps) {
       dangerouslySetInnerHTML={{ __html: description }}
       sx={[
         (theme) => ({
-          gridArea: 'description',
-          margin: `0 auto ${theme.spacings.sm}`,
-          padding: `0 ${theme.page.horizontal}`,
-          textAlign: 'center',
-          maxWidth: { md: '900px' },
           typography: 'subtitle1',
+          [theme.breakpoints.down('sm')]: {
+            textAlign: textAlignSm,
+            '&.textAlignSmCenter': {
+              mx: 'auto',
+            },
+          },
+          [theme.breakpoints.up('md')]: {
+            maxWidth: '900px',
+            textAlign: textAlignMd,
+            '&.textAlignMdCenter': {
+              mx: 'auto',
+            },
+          },
         }),
         ...(Array.isArray(sx) ? sx : [sx]),
       ]}

package/components/CategoryHeroNav/CategoryHeroNav.graphql

@@ -8,5 +8,6 @@ fragment CategoryHeroNav on CategoryTree {
     url_path
     name
     include_in_menu
+    image
   }
 }

package/components/CategoryHeroNav/CategoryHeroNav.tsx

@@ -14,8 +14,8 @@ const cmpName = 'CategoryHeroNav' as const
 const parts = ['wrapper', 'categories', 'title', 'placeholder'] as const
 const { classes } = extendableComponent(cmpName, parts)
 
-export function CategoryHeroNav({ children, title, asset, sx = [] }: CategoryHeroNavProps) {
-  return (
+export const CategoryHeroNav = React.memo<CategoryHeroNavProps>(
+  ({ children, title, asset, sx = [] }) => (
     <Row
       className={classes.wrapper}
       maxWidth={false}
@@ -133,5 +133,5 @@ export function CategoryHeroNav({ children, title, asset, sx = [] }: CategoryHer
         <Box>{asset}</Box>
       </Box>
     </Row>
-  )
-}
+  ),
+)

package/components/CategoryHeroNav/CategoryHeroNavTitle.tsx

@@ -1,13 +1,13 @@
 import { LayoutTitle } from '@graphcommerce/next-ui'
 import { SxProps, Theme } from '@mui/material'
-import React from 'react'
+import { memo } from 'react'
 
 type CategoryHeroNavTitleProps = {
   children: React.ReactNode
   sx?: SxProps<Theme>
 }
 
-export function CategoryHeroNavTitle(props: CategoryHeroNavTitleProps) {
+export const CategoryHeroNavTitle = memo<CategoryHeroNavTitleProps>((props) => {
   const { children, sx = [] } = props
 
   return (
@@ -15,11 +15,9 @@ export function CategoryHeroNavTitle(props: CategoryHeroNavTitleProps) {
       variant='h1'
       sx={[
         (theme) => ({
-          justifyContent: 'center',
           [theme.breakpoints.up('md')]: {
-            margin: 0,
-            alignItems: 'start',
-            justifyContent: 'end',
+            m: 0,
+            justifyContent: 'start',
           },
         }),
         ...(Array.isArray(sx) ? sx : [sx]),
@@ -28,4 +26,4 @@ export function CategoryHeroNavTitle(props: CategoryHeroNavTitleProps) {
       {children}
     </LayoutTitle>
   )
-}
+})

package/index.ts

@@ -1,8 +1,16 @@
 export * from './components/CategoryChildren/CategoryChildren'
+export * from './components/CategoryChildren/CategoryChildren.gql'
+export * from './components/CategoryChildren/CategorySiblings.gql'
 export * from './components/CategoryDescription/CategoryDescription'
 export * from './components/CategoryHeroNav/CategoryHeroNav'
 export * from './components/CategoryHeroNav/CategoryHeroNavTitle'
 export * from './components/CategoryMeta/CategoryMeta'
+export * from './utils/appendSiblingsAsChildren'
 export * from './utils/magentoMenuToNavigation'
+export * from './utils/findParentBreadcrumbItem'
 export * from './queries/getCategoryStaticPaths'
 export * from './components/CategoryBreadcrumb'
+export * from './queries/CategoryQueryFragment.gql'
+export * from './queries/MenuQueryFragment.gql'
+export * from './queries/NavigationItem.gql'
+export * from './utils/useCategoryTree'

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/magento-category",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "8.1.0-canary.9",
+  "version": "9.0.0-canary.55",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "eslintConfig": {
@@ -12,15 +12,15 @@
     }
   },
   "peerDependencies": {
-    "@graphcommerce/eslint-config-pwa": "^8.1.0-canary.9",
-    "@graphcommerce/framer-scroller": "^8.1.0-canary.9",
-    "@graphcommerce/graphql": "^8.1.0-canary.9",
-    "@graphcommerce/image": "^8.1.0-canary.9",
-    "@graphcommerce/magento-product": "^8.1.0-canary.9",
-    "@graphcommerce/magento-store": "^8.1.0-canary.9",
-    "@graphcommerce/next-ui": "^8.1.0-canary.9",
-    "@graphcommerce/prettier-config-pwa": "^8.1.0-canary.9",
-    "@graphcommerce/typescript-config-pwa": "^8.1.0-canary.9",
+    "@graphcommerce/eslint-config-pwa": "^9.0.0-canary.55",
+    "@graphcommerce/framer-scroller": "^9.0.0-canary.55",
+    "@graphcommerce/graphql": "^9.0.0-canary.55",
+    "@graphcommerce/image": "^9.0.0-canary.55",
+    "@graphcommerce/magento-product": "^9.0.0-canary.55",
+    "@graphcommerce/magento-store": "^9.0.0-canary.55",
+    "@graphcommerce/next-ui": "^9.0.0-canary.55",
+    "@graphcommerce/prettier-config-pwa": "^9.0.0-canary.55",
+    "@graphcommerce/typescript-config-pwa": "^9.0.0-canary.55",
     "@lingui/core": "^4.2.1",
     "@lingui/macro": "^4.2.1",
     "@lingui/react": "^4.2.1",

package/queries/CategoryPathFragment.graphql

@@ -1,4 +1,4 @@
-fragment CategoryPathFragment on CategoryTree @injectable {
+fragment CategoryPathFragment on CategoryTree {
   uid
   url_path
   children {

package/queries/NavigationItem.graphql

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

package/utils/appendSiblingsAsChildren.ts

@@ -0,0 +1,23 @@
+import { ApolloClient } from '@graphcommerce/graphql'
+import { CategoryBreadcrumbFragment } from '../components/CategoryBreadcrumb'
+import { CategoryChildrenFragment } from '../components/CategoryChildren/CategoryChildren.gql'
+import { CategorySiblingsDocument } from '../components/CategoryChildren/CategorySiblings.gql'
+import { findParentBreadcrumbItem } from './findParentBreadcrumbItem'
+
+export function appendSiblingsAsChildren(
+  categoryPromise: Promise<
+    (CategoryBreadcrumbFragment & CategoryChildrenFragment) | null | undefined
+  >,
+  client: ApolloClient<object>,
+) {
+  return categoryPromise.then(async (cat) => {
+    const parentUid = findParentBreadcrumbItem(cat)?.category_uid
+    if (!cat || (cat?.children?.length ?? 0) > 0 || !parentUid) return
+
+    const res = await client.query({
+      query: CategorySiblingsDocument,
+      variables: { parentUid },
+    })
+    cat.children = res.data.categories?.items
+  })
+}

package/utils/findParentBreadcrumbItem.ts

@@ -0,0 +1,12 @@
+import { filterNonNullableKeys } from '@graphcommerce/next-ui'
+import { CategoryBreadcrumbFragment } from '../components/CategoryBreadcrumb'
+
+export function findParentBreadcrumbItem(
+  category: CategoryBreadcrumbFragment | null | undefined,
+): NonNullable<CategoryBreadcrumbFragment['breadcrumbs']>[number] | undefined {
+  const parentCategoryPath = category?.url_path?.split('/').slice(0, -1).join('/')
+
+  return filterNonNullableKeys(category?.breadcrumbs, ['category_url_path']).find(
+    (c) => parentCategoryPath === c.category_url_path,
+  )
+}

package/utils/useCategoryTree.tsx

@@ -0,0 +1,71 @@
+import { ProductListParams } from '@graphcommerce/magento-product'
+import { filterNonNullableKeys } from '@graphcommerce/next-ui'
+import { CategoryBreadcrumbFragment } from '../components/CategoryBreadcrumb'
+import { CategoryChildrenFragment } from '../components/CategoryChildren/CategoryChildren.gql'
+
+export type UseCategoryTreeProps = {
+  category?: CategoryChildrenFragment & CategoryBreadcrumbFragment
+  params?: ProductListParams
+  hideBreadcrumbs?: boolean | null
+}
+
+export type CategoryTreeItem = {
+  title: React.ReactNode
+  value: string
+  selected: boolean
+  isBack?: boolean
+  indent: number
+  uid: string
+  count: null | number
+  visible?: boolean
+}
+
+export function useCategoryTree(props: UseCategoryTreeProps): CategoryTreeItem[] | null {
+  const { category, params, hideBreadcrumbs } = props
+
+  if (!params || !category || !category.url_path || !category.name) return null
+
+  const parents = filterNonNullableKeys(category?.breadcrumbs, [
+    'category_name',
+    'category_level',
+    'category_url_path',
+  ]).map<CategoryTreeItem>((breadcrumb) => ({
+    title: breadcrumb.category_name,
+    value: breadcrumb.category_url_path,
+    indent: 0,
+    isBack: true,
+    selected: params?.url === breadcrumb.category_url_path,
+    uid: breadcrumb.category_uid,
+    count: null,
+  }))
+
+  let children = filterNonNullableKeys(category.children, [
+    'url_path',
+    'name',
+    'include_in_menu',
+  ]).map<CategoryTreeItem>((categoryItem) => ({
+    title: <>{`${`${categoryItem.name}`}`}</>,
+    value: categoryItem.url_path,
+    indent: hideBreadcrumbs ? 0 : 2,
+    isBack: false,
+    selected: params.url === categoryItem.url_path,
+    uid: categoryItem.uid,
+    count: null,
+  }))
+
+  if (!children.find((item) => item.value === category.url_path) && !hideBreadcrumbs)
+    children.push({
+      title: <> {category.name}</>,
+      value: category.url_path,
+      indent: 1,
+      isBack: false,
+      selected: true,
+      uid: category.uid,
+      count: null,
+    })
+  else if (!hideBreadcrumbs) children = children.map((child) => ({ ...child, indent: 2 }))
+
+  if (hideBreadcrumbs) return children.sort((a, b) => a.indent - b.indent)
+
+  return [...parents, ...children].sort((a, b) => a.indent - b.indent)
+}