@graphcommerce/graphcms-ui 2.103.1

package/CHANGELOG.md

@@ -0,0 +1,79 @@
+# 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.1](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/graphcms-ui@2.103.0...@graphcommerce/graphcms-ui@2.103.1) (2021-09-27)
+
+**Note:** Version bump only for package @graphcommerce/graphcms-ui
+
+
+
+
+
+# 2.103.0 (2021-09-27)
+
+
+### Bug Fixes
+
+* 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))
+* narrow quote on mobile ([e06ccc2](https://github.com/ho-nl/m2-pwa/commit/e06ccc25048124431dcdb786f1719f688a5e429c))
+* remove conflicting files ([0c17ae4](https://github.com/ho-nl/m2-pwa/commit/0c17ae46be62b775ac83b35f11c532ce2d9401a3))
+* 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))
+
+
+### Features
+
+* created stacked-pages package ([d86008e](https://github.com/ho-nl/m2-pwa/commit/d86008ee659ccb25b194a41d624b394a1ddbd088))
+* **image:** introduced completely rewritten Image component ([e3413b3](https://github.com/ho-nl/m2-pwa/commit/e3413b3a57392d6571ea64cb8d9c8dca05ea31df))
+* implemented the ability to load graphcms content by URL ([99bc970](https://github.com/ho-nl/m2-pwa/commit/99bc970fc46d40b7efa99a71819529aeaa206bb4))
+* introduced graphcms-ui package to quickly build pages ([04d89c3](https://github.com/ho-nl/m2-pwa/commit/04d89c3fecf25f64923caf437eeb4b73f8887102))
+* introduces framer-next-pages and framer-sheet to next-ui and soxbase package ([e04ad8a](https://github.com/ho-nl/m2-pwa/commit/e04ad8a94cd1fd5a7c5575c9db7916b6e8a88f16))
+* 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))
+* 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))
+
+
+### Reverts
+
+* Revert "chore: upgrade @apollo/client" ([55ff24e](https://github.com/ho-nl/m2-pwa/commit/55ff24ede0e56c85b8095edadadd1ec5e0b1b8d2))
+
+
+
+
+
+# Change Log
+
+All notable changes to this project will be documented in this file. See
+[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
+# [2.102.0](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/graphcms-ui@2.101.9...@graphcommerce/graphcms-ui@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/graphcms-ui@2.101.8...@graphcommerce/graphcms-ui@2.101.9) (2021-08-09)
+
+### Reverts
+
+- Revert "chore: upgrade @apollo/client"
+  ([55ff24e](https://github.com/ho-nl/m2-pwa/commit/55ff24ede0e56c85b8095edadadd1ec5e0b1b8d2))
+
+# [2.101.0](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/graphcms-ui@2.100.18...@graphcommerce/graphcms-ui@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.11](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/graphcms-ui@2.100.10...@graphcommerce/graphcms-ui@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/RichText/RichTextColumns.tsx

@@ -0,0 +1,22 @@
+import { makeStyles, Theme } from '@material-ui/core'
+import { UseStyles } from '@graphcommerce/next-ui'
+import React from 'react'
+import RichText, { RichTextProps } from '.'
+
+type StyleProps = { columnCount: number }
+
+const useStyles = makeStyles(({ spacings, breakpoints }: Theme) => ({
+  paragraph: {
+    [breakpoints.up('md')]: {
+      columnCount: ({ columnCount }: StyleProps) => columnCount,
+      columnGap: spacings.md,
+    },
+  },
+}))
+
+type RichTextColumnsProps = UseStyles<typeof useStyles> & StyleProps & RichTextProps
+
+export default function RichTextColumns(props: RichTextColumnsProps) {
+  const classes = useStyles(props)
+  return <RichText classes={classes} {...props} />
+}

package/RichText/RichTextDoubleSpread.tsx

@@ -0,0 +1,18 @@
+import { withStyles, Theme } from '@material-ui/core'
+import RichText from '.'
+
+const RichTextDoubleSpread = withStyles((theme: Theme) => ({
+  h2: theme.typography.h4,
+  paragraph: {
+    [theme.breakpoints.up('sm')]: {
+      columnCount: 2,
+      columnGap: theme.spacings.md,
+    },
+    [theme.breakpoints.up('lg')]: {
+      columnCount: 3,
+      columnGap: theme.spacings.md,
+    },
+  },
+}))(RichText)
+
+export default RichTextDoubleSpread

package/RichText/RichTextHeadingStrongStroked.tsx

@@ -0,0 +1,24 @@
+import { Theme, withStyles } from '@material-ui/core'
+import { responsiveVal } from '@graphcommerce/next-ui'
+import RichText from '.'
+
+const RichTextHeadingStrongStroked = withStyles((theme: Theme) => ({
+  h2: {
+    textTransform: 'uppercase',
+    color: theme.palette.text.primary,
+    WebkitTextStroke: `0.9px ${theme.palette.text.primary}`,
+    fontSize: responsiveVal(18, 50),
+    marginTop: responsiveVal(8, 20),
+    marginBottom: responsiveVal(18, 20),
+    '& strong': {
+      color: 'transparent',
+      WebkitTextStroke: `0.9px ${theme.palette.text.primary}`,
+    },
+    [theme.breakpoints.up('md')]: {
+      fontSize: responsiveVal(18, 60),
+      WebkitTextStroke: `1.2x ${theme.palette.text.primary}`,
+    },
+  },
+}))(RichText)
+
+export default RichTextHeadingStrongStroked

package/RichText/RichTextHero.tsx

@@ -0,0 +1,24 @@
+import { Theme, withStyles } from '@material-ui/core'
+import { responsiveVal } from '@graphcommerce/next-ui'
+import RichText from '.'
+
+const RichTextHero = withStyles((theme: Theme) => ({
+  h1: {
+    textTransform: 'uppercase',
+    maxWidth: '70%',
+    textAlign: 'center',
+    fontSize: responsiveVal(42, 50),
+    marginBottom: responsiveVal(22, 32),
+    [theme.breakpoints.up('md')]: {
+      textAlign: 'left',
+      fontSize: responsiveVal(18, 90),
+      maxWidth: '100%',
+    },
+    '& strong': {
+      color: 'transparent',
+      WebkitTextStroke: '1.2px #fff',
+    },
+  },
+}))(RichText)
+
+export default RichTextHero

package/RichText/RichTextParagraphStrongStroked.tsx

@@ -0,0 +1,23 @@
+import { Theme, withStyles } from '@material-ui/core'
+import { responsiveVal } from '@graphcommerce/next-ui'
+import RichText from '.'
+
+const RichTextParagraphStrongStroked = withStyles((theme: Theme) => ({
+  paragraph: {
+    textTransform: 'uppercase',
+    maxWidth: '100%',
+    fontWeight: 600,
+    textAlign: 'left',
+    fontSize: responsiveVal(11, 20),
+    [theme.breakpoints.up('md')]: {
+      maxWidth: '100%',
+      fontSize: responsiveVal(16, 34),
+    },
+    '& strong': {
+      color: 'transparent',
+      WebkitTextStroke: '1.2px #fff',
+    },
+  },
+}))(RichText)
+
+export default RichTextParagraphStrongStroked

package/RichText/RichTextQuote.tsx

@@ -0,0 +1,19 @@
+import { Theme, withStyles } from '@material-ui/core'
+import { responsiveVal } from '@graphcommerce/next-ui'
+import RichText from '.'
+
+const RichTextQuote = withStyles((theme: Theme) => ({
+  paragraph: {
+    fontWeight: 600,
+    textTransform: 'uppercase',
+    maxWidth: '60%',
+    textAlign: 'center',
+    margin: '0 auto',
+    fontSize: responsiveVal(14, 26),
+    [theme.breakpoints.up('lg')]: {
+      maxWidth: '80%',
+    },
+  },
+}))(RichText)
+
+export default RichTextQuote

package/RichText/RichTextSpread.tsx

@@ -0,0 +1,14 @@
+import { withStyles, Theme } from '@material-ui/core'
+import RichText from '.'
+
+const RichTextSpread = withStyles((theme: Theme) => ({
+  h2: theme.typography.h4,
+  paragraph: {
+    [theme.breakpoints.up('md')]: {
+      columnCount: 2,
+      columnGap: theme.spacings.md,
+    },
+  },
+}))(RichText)
+
+export default RichTextSpread

package/RichText/getNodeLength.tsx

@@ -0,0 +1,10 @@
+import { isElementNode, isTextNode, Node } from '.'
+
+export default function getNodeLength(node: Node): number {
+  if (isElementNode(node))
+    return node.children.map(getNodeLength).reduce<number>((prev, curr) => prev + curr, 0)
+
+  if (isTextNode(node)) return node.text.length
+
+  return 0
+}

package/RichText/index.tsx

@@ -0,0 +1,315 @@
+import { Link, Typography } from '@material-ui/core'
+import { Image } from '@graphcommerce/image'
+import PageLink from 'next/link'
+import React from 'react'
+import useRichTextStyles, { UseRichTextStyles } from './useRichTextStyles'
+
+export interface Element {
+  children: Node[]
+  type:
+    | 'heading-one'
+    | 'heading-two'
+    | 'heading-three'
+    | 'heading-four'
+    | 'heading-five'
+    | 'heading-six'
+    | 'paragraph'
+    | 'numbered-list'
+    | 'bulleted-list'
+    | 'block-quote'
+    | 'paragraph'
+    | 'list-item'
+    | 'list-item-child'
+    | 'table'
+    | 'table_head'
+    | 'table_body'
+    | 'table_row'
+    | 'table_cell'
+    | string
+  [key: string]: unknown
+}
+
+export interface Text {
+  text: string
+  bold?: true
+  italic?: true
+  underlined?: true
+  [key: string]: unknown
+}
+
+interface LinkElement extends Element {
+  type: 'link'
+  href: string
+}
+
+interface ImageElement extends Element {
+  type: 'image'
+  src: string
+  title: string
+  width: number
+  height: number
+  mimeType: string
+}
+
+interface VideoElement extends Element {
+  type: 'image'
+  src: string
+  title: string
+  width: number
+  height: number
+  mimeType: string
+}
+
+interface LinkElement extends Element {
+  type: 'link'
+  href: string
+}
+
+interface IframeElement extends Element {
+  type: 'iframe'
+  src: string
+}
+
+export type ElementNode =
+  | Element
+  | LinkElement
+  | ImageElement
+  | VideoElement
+  | IframeElement
+  | LinkElement
+
+export type Node = ElementNode | Text
+
+const RenderText = ({ classes, text, ...textProps }: Text & Required<UseRichTextStyles>) => {
+  let result = <>{text}</>
+  if (textProps.bold) result = <strong>{result}</strong>
+  if (textProps.italic) result = <em>{result}</em>
+  if (textProps.underlined) result = <em>{result}</em>
+
+  return result
+}
+
+export function isTextNode(node: Node): node is Text {
+  return (node as Text).text !== undefined
+}
+
+export function isElementNode(node: Node): node is ElementNode {
+  return (node as ElementNode).children !== undefined
+}
+
+function RenderNode({ classes, ...node }: Node & Required<UseRichTextStyles>) {
+  if (isTextNode(node)) {
+    return <RenderText {...node} classes={classes} />
+  }
+  if (isElementNode(node)) {
+    // eslint-disable-next-line @typescript-eslint/no-use-before-define
+    return <RenderElement {...node} classes={classes} />
+  }
+
+  console.error(node)
+  throw Error(`RichText: Node not recognized`)
+}
+
+function RenderChildren({ children, classes }: { children: Node[] } & Required<UseRichTextStyles>) {
+  return (
+    <>
+      {children.map((node, key) => (
+        // Since we don't know any unique identifiers of the element and since this doesn't rerender often this is fine.
+        // eslint-disable-next-line react/no-array-index-key
+        <RenderNode {...node} key={key} classes={classes} />
+      ))}
+    </>
+  )
+}
+
+function RenderElement({ classes, ...element }: ElementNode & Required<UseRichTextStyles>) {
+  const {
+    root,
+    asset,
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6,
+    paragraph,
+    ul,
+    ol,
+    blockQuote,
+    code,
+    iframe,
+    aspectContainer,
+    table,
+    link,
+  } = classes
+
+  switch (element.type) {
+    case 'heading-one':
+      return (
+        <Typography variant='h1' classes={{ root, h1 }}>
+          <RenderChildren {...element} classes={classes} />
+        </Typography>
+      )
+    case 'heading-two':
+      return (
+        <Typography variant='h2' classes={{ root, h2 }}>
+          <RenderChildren {...element} classes={classes} />
+        </Typography>
+      )
+    case 'heading-three':
+      return (
+        <Typography variant='h3' classes={{ root, h3 }}>
+          <RenderChildren {...element} classes={classes} />
+        </Typography>
+      )
+    case 'heading-four':
+      return (
+        <Typography variant='h4' classes={{ root, h4 }}>
+          <RenderChildren {...element} classes={classes} />
+        </Typography>
+      )
+    case 'heading-five':
+      return (
+        <Typography variant='h5' classes={{ root, h5 }}>
+          <RenderChildren {...element} classes={classes} />
+        </Typography>
+      )
+    case 'heading-six':
+      return (
+        <Typography variant='h6' classes={{ root, h6 }}>
+          <RenderChildren {...element} classes={classes} />
+        </Typography>
+      )
+    case 'paragraph':
+      return element.children[0].code ? (
+        <pre className={classes.code}>
+          <code>
+            <RenderChildren {...element} classes={classes} />
+          </code>
+        </pre>
+      ) : (
+        <Typography variant='body1' paragraph classes={{ root, paragraph }}>
+          <RenderChildren {...element} classes={classes} />
+        </Typography>
+      )
+
+    case 'bulleted-list':
+      return (
+        <Typography component='ul' classes={{ root: ul }}>
+          <RenderChildren {...element} classes={classes} />
+        </Typography>
+      )
+    case 'numbered-list':
+      return (
+        <Typography component='ol' classes={{ root: ol }}>
+          <RenderChildren {...element} classes={classes} />
+        </Typography>
+      )
+    case 'list-item':
+      return (
+        <li>
+          <RenderChildren {...element} classes={classes} />
+        </li>
+      )
+    case 'list-item-child':
+      return <RenderChildren {...element} classes={classes} />
+    case 'block-quote':
+      return (
+        <Typography component='blockquote' classes={{ root: blockQuote }}>
+          <RenderChildren {...element} classes={classes} />
+        </Typography>
+      )
+    case 'iframe':
+      // eslint-disable-next-line no-case-declarations
+      const iframeElement = element as IframeElement
+      // todo(paales) add security attributes to iframe
+      // todo(paales) make iframe responsive
+      return (
+        <div className={aspectContainer}>
+          <iframe
+            src={iframeElement.src}
+            title='embedded content'
+            className={iframe}
+            loading='lazy'
+          />
+        </div>
+      )
+    case 'image':
+      // eslint-disable-next-line no-case-declarations
+      const imageElement = element as ImageElement
+      return (
+        <Image
+          src={imageElement.src}
+          width={imageElement.width}
+          height={imageElement.height}
+          alt={imageElement.title}
+          className={asset}
+        />
+      )
+    case 'video':
+      // eslint-disable-next-line no-case-declarations
+      const videoElement = element as VideoElement
+      return (
+        <div>IMPLEMENT VIDEO</div>
+        // <Asset
+        //   asset={{ url: videoElement.src, mimeType: videoElement.mimeType }}
+        //   autoPlay
+        //   loop
+        //   muted
+        //   playsInline
+        //   width={380}
+        //   className={asset}
+        // />
+      )
+    case 'link':
+      // eslint-disable-next-line no-case-declarations
+      const linkElement = element as LinkElement
+      return (
+        <PageLink href={linkElement.href} passHref>
+          <Link classes={{ root: link }}>
+            <RenderChildren {...element} classes={classes} />
+          </Link>
+        </PageLink>
+      )
+    case 'table':
+      return (
+        <table className={table}>
+          <RenderChildren {...element} classes={classes} />
+        </table>
+      )
+    case 'table_head':
+      return (
+        <thead>
+          <RenderChildren {...element} classes={classes} />
+        </thead>
+      )
+    case 'table_body':
+      return (
+        <tbody>
+          <RenderChildren {...element} classes={classes} />
+        </tbody>
+      )
+    case 'table_row':
+      return (
+        <tr>
+          <RenderChildren {...element} classes={classes} />
+        </tr>
+      )
+    case 'table_cell':
+      return (
+        <td>
+          <RenderChildren {...element} classes={classes} />
+        </td>
+      )
+    default:
+      console.error(element)
+      throw Error(`RichText: Unknown Element: ${element.type}`)
+  }
+}
+
+export type RichTextProps = { raw: ElementNode } & UseRichTextStyles
+
+export default function RichText({ raw, ...props }: RichTextProps) {
+  const classes = useRichTextStyles(props)
+  return <RenderChildren classes={classes} {...raw} />
+}

package/RichText/useRichTextStyles.tsx

@@ -0,0 +1,112 @@
+import { makeStyles, Theme } from '@material-ui/core'
+import { UseStyles, responsiveVal } from '@graphcommerce/next-ui'
+
+const useRichTextStyles = makeStyles(
+  ({ spacings, breakpoints, palette, typography }: Theme) => ({
+    root: { '&:empty': { display: 'none' }, '&:last-child': { marginBottom: 0 } },
+    paragraph: { marginBottom: '1em', wordBreak: 'break-word' },
+    h1: { marginTop: responsiveVal(9, 0), marginBottom: responsiveVal(21, 50) },
+    h2: {
+      marginTop: responsiveVal(22, 40),
+      marginBottom: responsiveVal(20, 40),
+      '&:first-child': { marginTop: 0 },
+    },
+    h3: {
+      marginTop: responsiveVal(22, 30),
+      marginBottom: responsiveVal(22, 30),
+      '&:first-child': { marginTop: 0 },
+    },
+    h4: {
+      marginTop: responsiveVal(11, 30),
+      marginBottom: responsiveVal(11, 30),
+      '&:first-child': { marginTop: 0 },
+    },
+    h5: {
+      marginTop: responsiveVal(7, 20),
+      marginBottom: responsiveVal(7, 20),
+      '&:first-child': { marginTop: 0 },
+    },
+    h6: { '&:first-of-type': { marginTop: 0 } },
+    asset: { width: '100%', height: 'auto' },
+    blockQuote: {
+      color: '#777',
+      borderLeft: '4px solid #999',
+      paddingLeft: spacings.sm,
+      margin: `${spacings.md} 0`,
+    },
+    ol: { marginBottom: '1em' },
+    ul: { marginBottom: '1em' },
+    strong: {},
+    italic: {},
+    underlined: {},
+    code: {
+      width: 'fit-content',
+      maxWidth: '100%',
+      background: '#d8d8d8',
+      padding: 5,
+      fontSize: 17,
+      overflow: 'scroll',
+    },
+    aspectContainer: {
+      position: 'relative',
+      paddingTop: 'calc(100% / 16 * 9)',
+      marginBottom: spacings.md,
+      '& > *': {
+        width: '100%',
+        height: '100%',
+        position: 'absolute',
+        top: 0,
+        left: 0,
+      },
+    },
+    iframe: {},
+    table: {
+      display: 'table',
+      width: '100%',
+      borderSpacing: '2px',
+      borderCollapse: 'collapse',
+      marginTop: spacings.md,
+      marginBottom: spacings.sm,
+
+      '& thead, tbody': {
+        '& td': {
+          padding: '10px 20px',
+        },
+      },
+
+      '& thead': {
+        '& tr': {
+          '& td': {
+            '& p': {
+              fontWeight: typography.fontWeightBold,
+            },
+          },
+        },
+      },
+      '& tbody': {
+        display: 'table-row-group',
+        verticalAlign: 'center',
+        borderColor: 'inherit',
+
+        '& tr': {
+          '&:nth-child(odd)': {
+            background: palette.background.highlight,
+          },
+        },
+
+        '& td': {
+          [breakpoints.up('sm')]: {
+            minWidth: '150px',
+          },
+
+          '& p': { fontSize: responsiveVal(12, 15) },
+        },
+      },
+    },
+    link: { wordBreak: 'break-word' },
+  }),
+  { name: 'RichText' },
+)
+export type UseRichTextStyles = UseStyles<typeof useRichTextStyles>
+
+export default useRichTextStyles

package/index.ts

@@ -0,0 +1 @@
+export {}

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,34 @@
+{
+  "name": "@graphcommerce/graphcms-ui",
+  "version": "2.103.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/image": "^2.104.1",
+    "@graphcommerce/next-ui": "^3.0.1",
+    "@graphql-typed-document-node/core": "^3.1.0",
+    "@material-ui/core": "^4.12.3",
+    "@material-ui/lab": "^4.0.0-alpha.60",
+    "next": "^11.1.2",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "type-fest": "^2.1.0"
+  }
+}

package/tsconfig.json

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