@graphcommerce/magento-category 3.0.1

package/CHANGELOG.md

@@ -0,0 +1,163 @@
+# Change Log
+
+All notable changes to this project will be documented in this file.
+See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
+## [3.0.1](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/magento-category@3.0.0...@graphcommerce/magento-category@3.0.1) (2021-09-27)
+
+**Note:** Version bump only for package @graphcommerce/magento-category
+
+
+
+
+
+# 3.0.0 (2021-09-27)
+
+
+### Bug Fixes
+
+* **app-shell-header:** title offset top not correctly set ([c144309](https://github.com/ho-nl/m2-pwa/commit/c1443095317c1779074f3a4058f4041159c8e31b))
+* **app-shell:** pages after app shell changes ([fb74510](https://github.com/ho-nl/m2-pwa/commit/fb74510121f6124009db72ad2ddebf6459c52a85))
+* canonical urls ([9ff8d3f](https://github.com/ho-nl/m2-pwa/commit/9ff8d3f950098fb28440f31f5dd93a835dce0bda))
+* category children and swatch renderer ([1ee008d](https://github.com/ho-nl/m2-pwa/commit/1ee008d9ecf3bf5ec4b2d82243e4bcbbec384411))
+* category children mobile positioning ([fafa02d](https://github.com/ho-nl/m2-pwa/commit/fafa02d393919cdb7f89d72afa17da07228f8093))
+* category hero nav margin top ([31f8dee](https://github.com/ho-nl/m2-pwa/commit/31f8deed1d545d78bb856d4cfdfe0c7ec8671308))
+* CategoryHeroNav styles ([6f185e7](https://github.com/ho-nl/m2-pwa/commit/6f185e74ee4c756efdf94ebcdee9b4593077f415))
+* empty grid rows still have a gap ([7ba50c7](https://github.com/ho-nl/m2-pwa/commit/7ba50c740aa7ac5133b933b3e6a22fab853b55a6))
+* filters sometimes do not apply ([b8bc412](https://github.com/ho-nl/m2-pwa/commit/b8bc4122c82c6b27bdc76481dd6ece1da021266a))
+* **framer-next-page:** usePageRouter in SharedLayout ([c2fb164](https://github.com/ho-nl/m2-pwa/commit/c2fb164b342770089b787378a3f79529c36d2152))
+* getStaticPaths shouldn’t have the url suffix ([0fc9e1c](https://github.com/ho-nl/m2-pwa/commit/0fc9e1cec78ba653e32de042fb60a3ca88eb494d))
+* ignore md files from triggering version updates ([4f98392](https://github.com/ho-nl/m2-pwa/commit/4f9839250b3a32d3070da5290e5efcc5e2243fba))
+* implement next-ui barrel imports ([75bea70](https://github.com/ho-nl/m2-pwa/commit/75bea703dba898f18a2a1dfa3243ebd0a4e6f0e1))
+* remove conflicting files ([0c17ae4](https://github.com/ho-nl/m2-pwa/commit/0c17ae46be62b775ac83b35f11c532ce2d9401a3))
+* remove magento-category package from magento-product solving a circular dependency ([7379e6e](https://github.com/ho-nl/m2-pwa/commit/7379e6ede4829392b35008c17743181d9cac0636))
+* search page routes ([4161179](https://github.com/ho-nl/m2-pwa/commit/4161179aaf2ecbc0fde0efbba891a7b85524e283))
+* since all links are of next/link we need to add passHref for custom components ([16fb931](https://github.com/ho-nl/m2-pwa/commit/16fb93100d367203ea79bb4f93357221253f2ecd))
+* solve issue if an attribute was named ‘size’ ([dab088e](https://github.com/ho-nl/m2-pwa/commit/dab088ed5f1a2916dc991a7d5c0b8d703a2ea3b7))
+* spelling errors, wrong imports ([01cb889](https://github.com/ho-nl/m2-pwa/commit/01cb889513d69ce0555ac7aaa1a37702d75b0a0d))
+* update magento-product imports ([63621b4](https://github.com/ho-nl/m2-pwa/commit/63621b44be7149014f4a5af8ac87ad1c4b0327be))
+* word-break for category hero nav ([be47595](https://github.com/ho-nl/m2-pwa/commit/be4759519a23889950430d60a9264d9806df552c))
+* yarn workspace packages hot reload ([d03fc9f](https://github.com/ho-nl/m2-pwa/commit/d03fc9fdda3486476761786f2b56a934cc92befc))
+
+
+### Features
+
+* add barrel file for magento-category ([c5ba8c9](https://github.com/ho-nl/m2-pwa/commit/c5ba8c98cbb8192f1c1c85242ff6efa83b1fbdcc))
+* add getFilterTypes to shared client, faster generation ([beccfde](https://github.com/ho-nl/m2-pwa/commit/beccfde6ebc8aaf6223f0e8b33fabf4f5039efed))
+* add graphcms asset to category page ([a760f25](https://github.com/ho-nl/m2-pwa/commit/a760f2547485e56b1fd4ecb03dd3cfb0a1c4819e))
+* animated filters ([846e233](https://github.com/ho-nl/m2-pwa/commit/846e233c9653821afbe9cfe7742dc42bb869a078))
+* better 404 handling and simplified getStaticProps ([321ace1](https://github.com/ho-nl/m2-pwa/commit/321ace1850642ee3eddfa674c37e6fca8adcdb74))
+* canonical urls using abstract page meta component ([7d52cfc](https://github.com/ho-nl/m2-pwa/commit/7d52cfc76af2766dedf883b1e3fa5a5101eca823))
+* category navigation ([00d1997](https://github.com/ho-nl/m2-pwa/commit/00d199741bb1ab266900869d27ac7251841aaf94))
+* created stable layout for category filters ([08d9351](https://github.com/ho-nl/m2-pwa/commit/08d9351dac5c9ede864ff336a60d758875d8efe4))
+* created stacked-pages package ([d86008e](https://github.com/ho-nl/m2-pwa/commit/d86008ee659ccb25b194a41d624b394a1ddbd088))
+* data agnostic animated header ([17047a6](https://github.com/ho-nl/m2-pwa/commit/17047a6d754494d9443c8f2e486cc232cf199c45))
+* **framer-next-pages:** implemented the FullPageShell for the remaining pages ([88386b4](https://github.com/ho-nl/m2-pwa/commit/88386b4652abb7765d6e755c7fb7a3cb6285a0e7))
+* **framer-scroller:** implemented the scroller on all pages ([73fb518](https://github.com/ho-nl/m2-pwa/commit/73fb518eff74edb2b3212e892b3d8cc2b088011b))
+* **graphql:** introduced new graphql package that holds all generated files ([a3e7aa0](https://github.com/ho-nl/m2-pwa/commit/a3e7aa05540540533b5ced9a95f1f802ecbe499f))
+* i18n routing added (/ and /fr for demo) ([bb3b339](https://github.com/ho-nl/m2-pwa/commit/bb3b339fbc9fceddd264a891ad81f00327a241ae))
+* **image:** introduced completely rewritten Image component ([e3413b3](https://github.com/ho-nl/m2-pwa/commit/e3413b3a57392d6571ea64cb8d9c8dca05ea31df))
+* introduced magento-product-types package ([1a0932b](https://github.com/ho-nl/m2-pwa/commit/1a0932b5d882608dcf8fd2e3b17ee9868f5f5776))
+* introduces framer-next-pages and framer-sheet to next-ui and soxbase package ([e04ad8a](https://github.com/ho-nl/m2-pwa/commit/e04ad8a94cd1fd5a7c5575c9db7916b6e8a88f16))
+* **magento-graphql:** added core magentoTypePolicies ([bdf15d0](https://github.com/ho-nl/m2-pwa/commit/bdf15d0d3c04e88339a8385d76f3b1ab9589fde3))
+* major performance refactor ([03f8e2f](https://github.com/ho-nl/m2-pwa/commit/03f8e2fa16ef919bd6bd6eadd36922d0245ed960))
+* next.js 11 ([7d61407](https://github.com/ho-nl/m2-pwa/commit/7d614075a778f488045034f74be4f75b93f63c43))
+* **playwright:** added new playwright package to enable browser testing ([6f49ec7](https://github.com/ho-nl/m2-pwa/commit/6f49ec7595563775b96ebf21c27e39da1282e8d9))
+* remove wrapper div from ScrollSnapSlider ([476add8](https://github.com/ho-nl/m2-pwa/commit/476add8db64811f2c7e3fc482487967cd7573cf6))
+* renamed all packages to use [@graphcommerce](https://github.com/graphcommerce) instead of [@reachdigital](https://github.com/reachdigital) ([491e4ce](https://github.com/ho-nl/m2-pwa/commit/491e4cec9a2686472dac36b79f999257c0811ffe))
+* upgrade to node 14 ([d079a75](https://github.com/ho-nl/m2-pwa/commit/d079a751e9bfd8dc7f5009d2c9f31c336a0c96ab))
+* upgraded to nextjs 11 ([0053beb](https://github.com/ho-nl/m2-pwa/commit/0053beb7ef597c190add7264256a0eaec35868da))
+* video support for CategoryHeroNav ([e24fe60](https://github.com/ho-nl/m2-pwa/commit/e24fe600f776aaf41735178472b2d1343c5252e6))
+
+
+### Reverts
+
+* Revert "chore: upgrade @apollo/client" ([55ff24e](https://github.com/ho-nl/m2-pwa/commit/55ff24ede0e56c85b8095edadadd1ec5e0b1b8d2))
+
+
+
+## 2.0.8 (2020-10-28)
+
+
+### Bug Fixes
+
+* make sure themes extensions are found ([5aa18db](https://github.com/ho-nl/m2-pwa/commit/5aa18db514fd2e2f50681367e39523f8e742ece0))
+
+
+### Features
+
+* added generated graphql.ts files ([3e44415](https://github.com/ho-nl/m2-pwa/commit/3e44415b018e74b502e9e98479aa5e84041f337d))
+* split into packages ([2ee7fd6](https://github.com/ho-nl/m2-pwa/commit/2ee7fd6c0056f467d114f04d92c6c0ddf622d151))
+
+
+### BREAKING CHANGES
+
+* huge folder structure refactor, please read README to reinstall
+
+
+
+
+
+# Change Log
+
+All notable changes to this project will be documented in this file. See
+[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
+# [2.103.0](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/magento-category@2.102.10...@graphcommerce/magento-category@2.103.0) (2021-09-01)
+
+### Features
+
+- **framer-scroller:** implemented the scroller on all pages
+  ([73fb518](https://github.com/ho-nl/m2-pwa/commit/73fb518eff74edb2b3212e892b3d8cc2b088011b))
+
+## [2.102.9](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/magento-category@2.102.8...@graphcommerce/magento-category@2.102.9) (2021-08-27)
+
+### Bug Fixes
+
+- **app-shell:** pages after app shell changes
+  ([fb74510](https://github.com/ho-nl/m2-pwa/commit/fb74510121f6124009db72ad2ddebf6459c52a85))
+
+# [2.102.0](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/magento-category@2.101.9...@graphcommerce/magento-category@2.102.0) (2021-08-12)
+
+### Features
+
+- upgraded to nextjs 11
+  ([0053beb](https://github.com/ho-nl/m2-pwa/commit/0053beb7ef597c190add7264256a0eaec35868da))
+
+## [2.101.9](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/magento-category@2.101.8...@graphcommerce/magento-category@2.101.9) (2021-08-09)
+
+### Reverts
+
+- Revert "chore: upgrade @apollo/client"
+  ([55ff24e](https://github.com/ho-nl/m2-pwa/commit/55ff24ede0e56c85b8095edadadd1ec5e0b1b8d2))
+
+## [2.101.5](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/magento-category@2.101.4...@graphcommerce/magento-category@2.101.5) (2021-08-03)
+
+### Bug Fixes
+
+- remove magento-category package from magento-product solving a circular
+  dependency
+  ([7379e6e](https://github.com/ho-nl/m2-pwa/commit/7379e6ede4829392b35008c17743181d9cac0636))
+
+# [2.101.0](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/magento-category@2.100.18...@graphcommerce/magento-category@2.101.0) (2021-07-26)
+
+### Features
+
+- **playwright:** added new playwright package to enable browser testing
+  ([6f49ec7](https://github.com/ho-nl/m2-pwa/commit/6f49ec7595563775b96ebf21c27e39da1282e8d9))
+
+## [2.100.17](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/magento-category@2.100.16...@graphcommerce/magento-category@2.100.17) (2021-07-23)
+
+### Bug Fixes
+
+- **app-shell-header:** title offset top not correctly set
+  ([c144309](https://github.com/ho-nl/m2-pwa/commit/c1443095317c1779074f3a4058f4041159c8e31b))
+- category hero nav margin top
+  ([31f8dee](https://github.com/ho-nl/m2-pwa/commit/31f8deed1d545d78bb856d4cfdfe0c7ec8671308))
+
+## [2.100.11](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/magento-category@2.100.10...@graphcommerce/magento-category@2.100.11) (2021-07-20)
+
+### Bug Fixes
+
+- ignore md files from triggering version updates
+  ([4f98392](https://github.com/ho-nl/m2-pwa/commit/4f9839250b3a32d3070da5290e5efcc5e2243fba))

package/components/CategoryBreadcrumb/CategoryBreadcrumb.gql.ts

@@ -0,0 +1,4 @@
+/* eslint-disable */
+import * as Types from '@graphcommerce/graphql';
+
+export type CategoryBreadcrumbFragment = { uid: string, breadcrumbs?: Types.Maybe<Array<Types.Maybe<{ category_uid: string, category_name?: Types.Maybe<string>, category_url_path?: Types.Maybe<string> }>>> };

package/components/CategoryBreadcrumb/CategoryBreadcrumb.graphql

@@ -0,0 +1,8 @@
+fragment CategoryBreadcrumb on CategoryInterface {
+  uid
+  breadcrumbs {
+    category_uid
+    category_name
+    category_url_path
+  }
+}

package/components/CategoryChildren/CategoryChildren.gql.ts

@@ -0,0 +1,4 @@
+/* eslint-disable */
+import * as Types from '@graphcommerce/graphql';
+
+export type CategoryChildrenFragment = { uid: string, children?: Types.Maybe<Array<Types.Maybe<{ uid: string, name?: Types.Maybe<string>, level?: Types.Maybe<number>, url_path?: Types.Maybe<string> }>>> };

package/components/CategoryChildren/CategoryChildren.graphql

@@ -0,0 +1,9 @@
+fragment CategoryChildren on CategoryTree {
+  uid
+  children {
+    uid
+    name
+    level
+    url_path
+  }
+}

package/components/CategoryChildren/CategoryChildren.tsx

@@ -0,0 +1,91 @@
+import { cloneDeep } from '@apollo/client/utilities'
+import { makeStyles, Theme } from '@material-ui/core'
+import { Scroller, ScrollerProvider } from '@graphcommerce/framer-scroller'
+import { ProductListLink, ProductListParams } from '@graphcommerce/magento-product'
+import { UseStyles } from '@graphcommerce/next-ui'
+import React from 'react'
+import { CategoryChildrenFragment } from './CategoryChildren.gql'
+
+const useStyles = makeStyles(
+  (theme: Theme) => ({
+    container: {
+      display: 'flex',
+      justifyContent: 'center',
+      marginBottom: theme.spacings.sm,
+    },
+    scroller: {
+      display: 'grid',
+      gridAutoFlow: 'column',
+    },
+    link: {
+      whiteSpace: 'nowrap',
+      display: 'block',
+      marginRight: `${theme.spacings.xxs}`,
+      marginLeft: `${theme.spacings.xxs}`,
+      ...theme.typography.h6,
+      position: 'relative',
+      paddingBottom: 8,
+      '&:before': {
+        content: '""',
+        width: 40,
+        height: 2,
+        background: theme.palette.primary.main,
+        position: 'absolute',
+        bottom: -8,
+        left: 0,
+        right: 0,
+        margin: '0 auto',
+        opacity: 0,
+        transition: 'opacity .2s ease, bottom .2s ease',
+      },
+      '&:hover': {
+        '&:before': {
+          opacity: 1,
+          bottom: 5,
+        },
+      },
+    },
+  }),
+  {
+    name: 'CategoryChildren',
+  },
+)
+
+type CategoryChildrenProps = Omit<CategoryChildrenFragment, 'uid'> & {
+  params: ProductListParams
+} & UseStyles<typeof useStyles>
+
+export default function CategoryChildren(props: CategoryChildrenProps) {
+  const { children, params } = props
+  const classes = useStyles(props)
+
+  if (!children || children.length === 0) return null
+
+  return (
+    <ScrollerProvider scrollSnapAlign='none'>
+      <div className={classes.container}>
+        <Scroller className={classes.scroller}>
+          {children.map((cat) => {
+            if (!cat?.url_path || !cat.name) 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}
+                className={classes.link}
+              >
+                {cat.name}
+              </ProductListLink>
+            )
+          })}
+        </Scroller>
+      </div>
+    </ScrollerProvider>
+  )
+}

package/components/CategoryDescription/CategoryDescription.gql.ts

@@ -0,0 +1,4 @@
+/* eslint-disable */
+import * as Types from '@graphcommerce/graphql';
+
+export type CategoryDescriptionFragment = { uid: string, description?: Types.Maybe<string>, name?: Types.Maybe<string>, display_mode?: Types.Maybe<string> };

package/components/CategoryDescription/CategoryDescription.graphql

@@ -0,0 +1,6 @@
+fragment CategoryDescription on CategoryTree {
+  uid
+  description
+  name
+  display_mode
+}

package/components/CategoryDescription/CategoryDescription.tsx

@@ -0,0 +1,38 @@
+import { makeStyles, Theme, Typography } from '@material-ui/core'
+import { UseStyles } from '@graphcommerce/next-ui'
+import React from 'react'
+import { CategoryDescriptionFragment } from './CategoryDescription.gql'
+
+type CategoryDescriptionProps = Omit<CategoryDescriptionFragment, 'uid'> &
+  JSX.IntrinsicElements['div'] &
+  UseStyles<typeof useStyles>
+
+const useStyles = makeStyles(
+  (theme: Theme) => ({
+    root: {
+      gridArea: 'description',
+      margin: '0 auto',
+      textAlign: 'center',
+      maxWidth: 732,
+      marginTop: theme.spacings.md,
+      marginBottom: theme.spacings.sm,
+    },
+  }),
+  { name: 'CategoryDescription' },
+)
+
+export default function CategoryDescription(props: CategoryDescriptionProps) {
+  const { name, description, display_mode, ...divProps } = props
+  const classes = useStyles(props)
+
+  return (
+    <div {...divProps} className={classes.root}>
+      <Typography variant='h2' component='h1' align='center'>
+        {name}
+      </Typography>
+      {/* todo: replace with proper content renderer */}
+      {/* eslint-disable-next-line react/no-danger */}
+      {description && <div dangerouslySetInnerHTML={{ __html: description }} />}
+    </div>
+  )
+}

package/components/CategoryHeroNav/CategoryHeroNav.gql.ts

@@ -0,0 +1,4 @@
+/* eslint-disable */
+import * as Types from '@graphcommerce/graphql';
+
+export type CategoryHeroNavFragment = { uid: string, level?: Types.Maybe<number>, is_anchor?: Types.Maybe<number>, name?: Types.Maybe<string>, children?: Types.Maybe<Array<Types.Maybe<{ uid: string, url_path?: Types.Maybe<string>, name?: Types.Maybe<string> }>>> };

package/components/CategoryHeroNav/CategoryHeroNav.graphql

@@ -0,0 +1,11 @@
+fragment CategoryHeroNav on CategoryTree {
+  uid
+  level
+  is_anchor
+  name
+  children {
+    uid
+    url_path
+    name
+  }
+}

package/components/CategoryHeroNav/CategoryHeroNav.tsx

@@ -0,0 +1,119 @@
+import { makeStyles, Theme, Typography } from '@material-ui/core'
+import { ProductListLink } from '@graphcommerce/magento-product'
+import React from 'react'
+import { CategoryHeroNavFragment } from './CategoryHeroNav.gql'
+
+const useStyles = makeStyles(
+  (theme: Theme) => ({
+    wrapper: {
+      display: 'grid',
+      gridTemplateColumns: '1fr',
+      gridTemplateAreas: `"title" "categories" "placeholder"`,
+      gridTemplateRows: 'auto 60vw',
+      borderBottom: '1px solid rgba(0,0,0,0.15)',
+      marginBottom: theme.spacings.xl,
+      paddingRight: 0,
+      paddingBottom: theme.page.vertical,
+      [theme.breakpoints.up('md')]: {
+        rowGap: theme.spacings.md,
+        width: '100%',
+        paddingRight: theme.page.horizontal,
+      },
+    },
+    categories: {
+      gridArea: 'categories',
+      display: 'grid',
+      gridColumnGap: theme.spacings.xl,
+      gridTemplateColumns: 'repeat(2, min-content)',
+      gridRowGap: theme.spacings.lg,
+      height: 'min-content',
+      alignSelf: 'center',
+      maxWidth: '80vw',
+      justifySelf: 'center',
+      [theme.breakpoints.up('md')]: {
+        gridColumnGap: theme.spacings.md,
+        gridRowGap: theme.spacings.md,
+        gridTemplateColumns: 'repeat(2, 1fr)',
+        maxWidth: '100vw',
+        width: '100%',
+        alignSelf: 'flex-start',
+      },
+    },
+    title: {
+      gridArea: 'title',
+      position: 'relative',
+      alignSelf: 'center',
+      [theme.breakpoints.up('md')]: {
+        alignSelf: 'flex-end',
+      },
+    },
+    placeholder: {
+      gridArea: 'placeholder',
+      background: '#fff',
+      minHeight: '40vh',
+      overflow: 'hidden',
+
+      '& *': {
+        width: '100%',
+        height: '100%',
+        objectFit: 'cover',
+      },
+    },
+    [theme.breakpoints.up('md')]: {
+      placeholder: {
+        minHeight: '80vh',
+      },
+      wrapper: {
+        paddingTop: 0,
+        gridColumnGap: 0,
+        display: 'grid',
+        gridTemplateAreas: `
+         ". title . placeholder"
+         ". categories . placeholder"
+        `,
+        gridTemplateColumns: '1fr 4.6fr 0.4fr 8fr',
+        gridTemplateRows: '0.3fr 0.7fr',
+      },
+    },
+  }),
+  { name: 'CategoryHeroNav' },
+)
+
+type Props = {
+  title: React.ReactNode
+  asset?: React.ReactNode
+}
+
+type CategoryHeroNavProps = Props & CategoryHeroNavFragment
+
+export default function CategoryHeroNav({ children, title, asset }: CategoryHeroNavProps) {
+  const classes = useStyles()
+
+  return (
+    <>
+      <div className={classes.wrapper}>
+        <div className={classes.title}>{title}</div>
+        <div className={classes.categories}>
+          {children?.map((category) => {
+            if (!category?.url_path || !category.uid || !category.name) return null
+            return (
+              <ProductListLink
+                underline='none'
+                color='textPrimary'
+                url={category.url_path}
+                filters={{}}
+                sort={{}}
+                key={category.uid}
+              >
+                <Typography variant='h4' component='span'>
+                  {category.name}
+                </Typography>
+              </ProductListLink>
+            )
+          })}
+        </div>
+        <div className={classes.placeholder}>{asset}</div>
+      </div>
+    </>
+  )
+}

package/components/CategoryHeroNav/CategoryHeroNavTitle.tsx

@@ -0,0 +1,35 @@
+import { makeStyles, Theme } from '@material-ui/core'
+import { AppShellTitle } from '@graphcommerce/next-ui'
+import React from 'react'
+
+const useStyles = makeStyles(
+  (theme: Theme) => ({
+    root: {
+      marginTop: 0,
+      marginBottom: 0,
+    },
+    container: {
+      padding: 0,
+    },
+    title: {
+      alignItems: 'center',
+      justifyContent: 'center',
+      [theme.breakpoints.up('md')]: {
+        alignItems: 'flex-start',
+        justifyContent: 'flex-end',
+      },
+    },
+  }),
+  { name: 'CategoryHeroNavTitle' },
+)
+
+type CategoryHeroNavTitleProps = {
+  children: React.ReactNode
+}
+
+export default function CategoryHeroNavTitle(props: CategoryHeroNavTitleProps) {
+  const { children } = props
+  const classes = useStyles()
+
+  return <AppShellTitle classes={classes}>{children}</AppShellTitle>
+}

package/components/CategoryMeta/CategoryMeta.gql.ts

@@ -0,0 +1,4 @@
+/* eslint-disable */
+import * as Types from '@graphcommerce/graphql';
+
+export type CategoryMetaFragment = { uid: string, name?: Types.Maybe<string>, meta_title?: Types.Maybe<string>, meta_description?: Types.Maybe<string> };

package/components/CategoryMeta/CategoryMeta.graphql

@@ -0,0 +1,6 @@
+fragment CategoryMeta on CategoryTree {
+  uid
+  name
+  meta_title
+  meta_description
+}

package/components/CategoryMeta/CategoryMeta.tsx

@@ -0,0 +1,27 @@
+import { ProductListParams } from '@graphcommerce/magento-product'
+import { PageMeta } from '@graphcommerce/magento-store'
+import { PageMetaProps } from '@graphcommerce/next-ui'
+import React from 'react'
+import { CategoryMetaFragment } from './CategoryMeta.gql'
+
+type CategoryMetaProps = CategoryMetaFragment &
+  Omit<PageMetaProps, 'title' | 'metaDescription'> & {
+    params?: ProductListParams
+  }
+
+export default function CategoryMeta(props: CategoryMetaProps) {
+  const { name, meta_title, meta_description, params, ...pageMetaProps } = props
+  const anyFilterActive = Object.keys(params?.filters ?? {}).length > 0
+
+  return (
+    <PageMeta
+      title={meta_title ?? name ?? ''}
+      metaDescription={meta_description ?? undefined}
+      metaRobots={anyFilterActive ? ['noindex'] : undefined}
+      canonical={`${params?.url}${
+        (params?.currentPage ?? 1) > 1 ? `/q/page/${params?.currentPage}` : ''
+      }`}
+      {...pageMetaProps}
+    />
+  )
+}

package/components/FilterInputTypes/FilterInputTypes.graphql

@@ -0,0 +1,10 @@
+# query FilterInputTypes {
+#   __type(name: "ProductAttributeFilterInput") {
+#     inputFields {
+#       name
+#       type {
+#         name
+#       }
+#     }
+#   }
+# }

package/index.ts

@@ -0,0 +1,7 @@
+export { default as CategoryChildren } from './components/CategoryChildren/CategoryChildren'
+export { default as CategoryDescription } from './components/CategoryDescription/CategoryDescription'
+export { default as CategoryHeroNav } from './components/CategoryHeroNav/CategoryHeroNav'
+export { default as CategoryHeroNavTitle } from './components/CategoryHeroNav/CategoryHeroNavTitle'
+export { default as CategoryMeta } from './components/CategoryMeta/CategoryMeta'
+
+export * from './queries/getCategoryStaticPaths'

package/next-env.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="next" />
+/// <reference types="next/types/global" />
+/// <reference types="next/image-types/global" />
+/// <reference types="@graphcommerce/next-ui/types" />

package/package.json

@@ -0,0 +1,37 @@
+{
+  "name": "@graphcommerce/magento-category",
+  "version": "3.0.1",
+  "sideEffects": false,
+  "prettier": "@graphcommerce/prettier-config-pwa",
+  "browserslist": [
+    "extends @graphcommerce/browserslist-config-pwa"
+  ],
+  "eslintConfig": {
+    "extends": "@graphcommerce/eslint-config-pwa",
+    "parserOptions": {
+      "project": "./tsconfig.json"
+    }
+  },
+  "devDependencies": {
+    "@graphcommerce/browserslist-config-pwa": "^3.0.1",
+    "@graphcommerce/eslint-config-pwa": "^3.0.1",
+    "@graphcommerce/prettier-config-pwa": "^3.0.1",
+    "@graphcommerce/typescript-config-pwa": "^3.0.1",
+    "@playwright/test": "^1.14.1"
+  },
+  "dependencies": {
+    "@apollo/client": "^3.3.21",
+    "@graphcommerce/framer-scroller": "^0.2.1",
+    "@graphcommerce/graphql": "^2.103.1",
+    "@graphcommerce/image": "^2.104.1",
+    "@graphcommerce/magento-product": "^3.0.1",
+    "@graphcommerce/magento-store": "^3.0.1",
+    "@graphcommerce/next-ui": "^3.0.1",
+    "@graphql-typed-document-node/core": "^3.1.0",
+    "@material-ui/core": "^4.12.3",
+    "next": "^11.1.2",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "type-fest": "^2.1.0"
+  }
+}

package/queries/CategoryPage.gql.ts

@@ -0,0 +1,12 @@
+/* eslint-disable */
+import * as Types from '@graphcommerce/graphql';
+
+import { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-node/core';
+
+export const CategoryPageDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"CategoryPage"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"url"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"categories"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"filters"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"url_path"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"eq"},"value":{"kind":"Variable","name":{"kind":"Name","value":"url"}}}]}}]}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"items"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"uid"}},{"kind":"Field","name":{"kind":"Name","value":"description"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"display_mode"}},{"kind":"Field","name":{"kind":"Name","value":"children"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"uid"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"level"}},{"kind":"Field","name":{"kind":"Name","value":"url_path"}}]}},{"kind":"Field","name":{"kind":"Name","value":"meta_title"}},{"kind":"Field","name":{"kind":"Name","value":"meta_description"}},{"kind":"Field","name":{"kind":"Name","value":"level"}},{"kind":"Field","name":{"kind":"Name","value":"is_anchor"}},{"kind":"InlineFragment","typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"CategoryInterface"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"breadcrumbs"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"category_uid"}},{"kind":"Field","name":{"kind":"Name","value":"category_name"}},{"kind":"Field","name":{"kind":"Name","value":"category_url_path"}}]}}]}}]}}]}}]}}]} as unknown as DocumentNode<CategoryPageQuery, CategoryPageQueryVariables>;
+export type CategoryPageQueryVariables = Types.Exact<{
+  url: Types.Scalars['String'];
+}>;
+
+
+export type CategoryPageQuery = { categories?: Types.Maybe<{ items?: Types.Maybe<Array<Types.Maybe<{ uid: string, description?: Types.Maybe<string>, name?: Types.Maybe<string>, display_mode?: Types.Maybe<string>, meta_title?: Types.Maybe<string>, meta_description?: Types.Maybe<string>, level?: Types.Maybe<number>, is_anchor?: Types.Maybe<number>, breadcrumbs?: Types.Maybe<Array<Types.Maybe<{ category_uid: string, category_name?: Types.Maybe<string>, category_url_path?: Types.Maybe<string> }>>>, children?: Types.Maybe<Array<Types.Maybe<{ uid: string, name?: Types.Maybe<string>, level?: Types.Maybe<number>, url_path?: Types.Maybe<string> }>>> }>>> }> };

package/queries/CategoryPage.graphql

@@ -0,0 +1,3 @@
+query CategoryPage($url: String!) {
+  ...CategoryQueryFragment
+}

package/queries/CategoryQueryFragment.gql.ts

@@ -0,0 +1,4 @@
+/* eslint-disable */
+import * as Types from '@graphcommerce/graphql';
+
+export type CategoryQueryFragment = { categories?: Types.Maybe<{ items?: Types.Maybe<Array<Types.Maybe<{ uid: string, description?: Types.Maybe<string>, name?: Types.Maybe<string>, display_mode?: Types.Maybe<string>, meta_title?: Types.Maybe<string>, meta_description?: Types.Maybe<string>, level?: Types.Maybe<number>, is_anchor?: Types.Maybe<number>, breadcrumbs?: Types.Maybe<Array<Types.Maybe<{ category_uid: string, category_name?: Types.Maybe<string>, category_url_path?: Types.Maybe<string> }>>>, children?: Types.Maybe<Array<Types.Maybe<{ uid: string, name?: Types.Maybe<string>, level?: Types.Maybe<number>, url_path?: Types.Maybe<string> }>>> }>>> }> };

package/queries/CategoryQueryFragment.graphql

@@ -0,0 +1,12 @@
+fragment CategoryQueryFragment on Query {
+  categories(filters: { url_path: { eq: $url } }) {
+    items {
+      uid
+      ...CategoryBreadcrumb
+      ...CategoryDescription
+      ...CategoryChildren
+      ...CategoryMeta
+      ...CategoryHeroNav
+    }
+  }
+}

package/queries/GetCategoryStaticPaths.gql.ts

@@ -0,0 +1,12 @@
+/* eslint-disable */
+import * as Types from '@graphcommerce/graphql';
+
+import { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-node/core';
+
+export const GetCategoryStaticPathsDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"GetCategoryStaticPaths"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"rootCategory"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"categories"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"filters"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"parent_category_uid"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"eq"},"value":{"kind":"Variable","name":{"kind":"Name","value":"rootCategory"}}}]}}]}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"items"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"uid"}},{"kind":"Field","name":{"kind":"Name","value":"url_path"}},{"kind":"Field","name":{"kind":"Name","value":"children"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"uid"}},{"kind":"Field","name":{"kind":"Name","value":"url_path"}},{"kind":"Field","name":{"kind":"Name","value":"children"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"uid"}},{"kind":"Field","name":{"kind":"Name","value":"url_path"}},{"kind":"Field","name":{"kind":"Name","value":"children"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"uid"}},{"kind":"Field","name":{"kind":"Name","value":"url_path"}}]}}]}}]}}]}}]}}]}}]} as unknown as DocumentNode<GetCategoryStaticPathsQuery, GetCategoryStaticPathsQueryVariables>;
+export type GetCategoryStaticPathsQueryVariables = Types.Exact<{
+  rootCategory: Types.Scalars['String'];
+}>;
+
+
+export type GetCategoryStaticPathsQuery = { categories?: Types.Maybe<{ items?: Types.Maybe<Array<Types.Maybe<{ uid: string, url_path?: Types.Maybe<string>, children?: Types.Maybe<Array<Types.Maybe<{ uid: string, url_path?: Types.Maybe<string>, children?: Types.Maybe<Array<Types.Maybe<{ uid: string, url_path?: Types.Maybe<string>, children?: Types.Maybe<Array<Types.Maybe<{ uid: string, url_path?: Types.Maybe<string> }>>> }>>> }>>> }>>> }> };

package/queries/GetCategoryStaticPaths.graphql

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

package/queries/MenuQueryFragment.gql.ts

@@ -0,0 +1,4 @@
+/* eslint-disable */
+import * as Types from '@graphcommerce/graphql';
+
+export type MenuQueryFragment = { menu?: Types.Maybe<{ items?: Types.Maybe<Array<Types.Maybe<{ uid: string, name?: Types.Maybe<string>, url_path?: Types.Maybe<string>, include_in_menu?: Types.Maybe<number> }>>> }> };

package/queries/MenuQueryFragment.graphql

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

package/queries/getCategoryStaticPaths.ts

@@ -0,0 +1,35 @@
+import { ApolloClient, NormalizedCacheObject } from '@apollo/client'
+import { StoreConfigDocument } from '@graphcommerce/magento-store'
+import { GetStaticPathsResult } from 'next'
+import {
+  GetCategoryStaticPathsDocument,
+  GetCategoryStaticPathsQuery,
+} from './GetCategoryStaticPaths.gql'
+
+type StaticPathsResult = GetStaticPathsResult<{ url: string[] }>
+
+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'] = []
+
+  type Category = NonNullable<NonNullable<GetCategoryStaticPathsQuery['categories']>['items']>[0]
+  const add = (cat: Category) => {
+    if (cat?.url_path) paths.push({ params: { url: cat.url_path.split('/') }, locale })
+    if (cat?.children) cat.children.forEach(add)
+  }
+  data.categories?.items?.forEach(add)
+
+  return process.env.VERCEL_ENV !== 'production' ? paths.slice(0, 1) : paths
+}
+
+export { getCategoryStaticPaths }

package/tsconfig.json

@@ -0,0 +1,5 @@
+{
+  "exclude": ["**/node_modules", "**/.*/"],
+  "include": ["**/*.ts", "**/*.tsx"],
+  "extends": "@graphcommerce/typescript-config-pwa/nextjs.json"
+}