@graphcommerce/graphcms-ui 2.106.39 → 3.0.0

package/CHANGELOG.md

@@ -1,158 +1,151 @@
 # 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.0
 
-## [2.106.12](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/graphcms-ui@2.106.11...@graphcommerce/graphcms-ui@2.106.12) (2021-12-17)
+### Major Changes
 
+- [#1258](https://github.com/ho-nl/m2-pwa/pull/1258)
+  [`ad36382a4`](https://github.com/ho-nl/m2-pwa/commit/ad36382a4d55d83d9e47b7eb6a02671a2a631a05)
+  Thanks [@paales](https://github.com/paales)! - Upgraded to Material UI 5
 
-### Bug Fixes
+### Patch Changes
 
-* make sure we're able to render table_header_cell and do not throw when rendering unknown elements in production ([f7b7972](https://github.com/ho-nl/m2-pwa/commit/f7b797272f5765801c3f2e217fa9905f65dbe6d6))
+- Updated dependencies
+  [[`ad36382a4`](https://github.com/ho-nl/m2-pwa/commit/ad36382a4d55d83d9e47b7eb6a02671a2a631a05)]:
+  - @graphcommerce/graphql@3.0.0
+  - @graphcommerce/image@3.0.0
+  - @graphcommerce/next-ui@4.0.0
 
+All notable changes to this project will be documented in this file. See
+[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [2.106.12](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/graphcms-ui@2.106.11...@graphcommerce/graphcms-ui@2.106.12) (2021-12-17)
 
+### Bug Fixes
 
+- make sure we're able to render table_header_cell and do not throw when rendering unknown elements
+  in production
+  ([f7b7972](https://github.com/ho-nl/m2-pwa/commit/f7b797272f5765801c3f2e217fa9905f65dbe6d6))
 
 # [2.106.0](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/graphcms-ui@2.105.4...@graphcommerce/graphcms-ui@2.106.0) (2021-12-01)
 
-
 ### Bug Fixes
 
-* build ([72d9353](https://github.com/ho-nl/m2-pwa/commit/72d935376a1967cc976c20b984ef15a862e5d0f4))
-* fontWeights ([7172527](https://github.com/ho-nl/m2-pwa/commit/71725272fe9f0b854d918ae357a668f641bfe8e5))
-* hero text spacing ([79dd6aa](https://github.com/ho-nl/m2-pwa/commit/79dd6aa2fe576104ebbbdd092f6b415d319dec48))
-* render bug stroke variable fonts ([582de18](https://github.com/ho-nl/m2-pwa/commit/582de187800ee9c53718bf43a39ca77398d21b91)), closes [/github.com/rsms/inter/issues/292#issuecomment-674993644](https://github.com//github.com/rsms/inter/issues/292/issues/issuecomment-674993644)
-
+- build ([72d9353](https://github.com/ho-nl/m2-pwa/commit/72d935376a1967cc976c20b984ef15a862e5d0f4))
+- fontWeights
+  ([7172527](https://github.com/ho-nl/m2-pwa/commit/71725272fe9f0b854d918ae357a668f641bfe8e5))
+- hero text spacing
+  ([79dd6aa](https://github.com/ho-nl/m2-pwa/commit/79dd6aa2fe576104ebbbdd092f6b415d319dec48))
+- render bug stroke variable fonts
+  ([582de18](https://github.com/ho-nl/m2-pwa/commit/582de187800ee9c53718bf43a39ca77398d21b91)),
+  closes
+  [/github.com/rsms/inter/issues/292#issuecomment-674993644](https://github.com//github.com/rsms/inter/issues/292/issues/issuecomment-674993644)
 
 ### Features
 
-* breakpointVal ([0294503](https://github.com/ho-nl/m2-pwa/commit/029450343051cf6995babad9f9b42c7e6ad1094e))
-* responsiveTyp ([6108b61](https://github.com/ho-nl/m2-pwa/commit/6108b6148e76ddbbe2db1614f10aaf88423db5ca))
-
-
-
-
+- breakpointVal
+  ([0294503](https://github.com/ho-nl/m2-pwa/commit/029450343051cf6995babad9f9b42c7e6ad1094e))
+- responsiveTyp
+  ([6108b61](https://github.com/ho-nl/m2-pwa/commit/6108b6148e76ddbbe2db1614f10aaf88423db5ca))
 
 # [2.105.0](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/graphcms-ui@2.104.29...@graphcommerce/graphcms-ui@2.105.0) (2021-11-12)
 
-
 ### Features
 
-* added tons of translations ([9bb0ac7](https://github.com/ho-nl/m2-pwa/commit/9bb0ac709b58df6ea6141e92e4923a5ca9ae2963))
-
-
-
-
+- added tons of translations
+  ([9bb0ac7](https://github.com/ho-nl/m2-pwa/commit/9bb0ac709b58df6ea6141e92e4923a5ca9ae2963))
 
 ## [2.104.29](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/graphcms-ui@2.104.28...@graphcommerce/graphcms-ui@2.104.29) (2021-11-12)
 
-
 ### Bug Fixes
 
-* must have smaller sizes for mobile ([34cf81e](https://github.com/ho-nl/m2-pwa/commit/34cf81eed6c5996f70be8b2c10888e44fad4d57f))
-
-
-
-
+- must have smaller sizes for mobile
+  ([34cf81e](https://github.com/ho-nl/m2-pwa/commit/34cf81eed6c5996f70be8b2c10888e44fad4d57f))
 
 ## [2.104.18](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/graphcms-ui@2.104.17...@graphcommerce/graphcms-ui@2.104.18) (2021-11-04)
 
-
 ### Bug Fixes
 
-* remove hardcoded fontSize ([e4e09e1](https://github.com/ho-nl/m2-pwa/commit/e4e09e11baeb8edeff634550b8cdb88571d96911))
-
-
-
-
+- remove hardcoded fontSize
+  ([e4e09e1](https://github.com/ho-nl/m2-pwa/commit/e4e09e11baeb8edeff634550b8cdb88571d96911))
 
 ## [2.104.16](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/graphcms-ui@2.104.15...@graphcommerce/graphcms-ui@2.104.16) (2021-11-03)
 
-
 ### Bug Fixes
 
-* various accessibility improvements ([47481a9](https://github.com/ho-nl/m2-pwa/commit/47481a9a882ba87968de6dd797557b0b275d75fb))
-
-
-
-
+- various accessibility improvements
+  ([47481a9](https://github.com/ho-nl/m2-pwa/commit/47481a9a882ba87968de6dd797557b0b275d75fb))
 
 ## [2.104.9](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/graphcms-ui@2.104.8...@graphcommerce/graphcms-ui@2.104.9) (2021-11-02)
 
-
 ### Bug Fixes
 
-* color from palette ([283cca1](https://github.com/ho-nl/m2-pwa/commit/283cca169ec00cbac8b973e14e6b77a443e26c99))
-* darkMode ([c7573de](https://github.com/ho-nl/m2-pwa/commit/c7573de6bb80643b26931c35ac61735539e7fbf0))
-
-
-
-
+- color from palette
+  ([283cca1](https://github.com/ho-nl/m2-pwa/commit/283cca169ec00cbac8b973e14e6b77a443e26c99))
+- darkMode
+  ([c7573de](https://github.com/ho-nl/m2-pwa/commit/c7573de6bb80643b26931c35ac61735539e7fbf0))
 
 ## [2.104.3](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/graphcms-ui@2.104.2...@graphcommerce/graphcms-ui@2.104.3) (2021-10-28)
 
-
 ### Bug Fixes
 
-* default heading margins for CMS content ([ac7c24f](https://github.com/ho-nl/m2-pwa/commit/ac7c24f731abf9573ad93d534d84b9f7c1b16a2b))
-
-
-
-
+- default heading margins for CMS content
+  ([ac7c24f](https://github.com/ho-nl/m2-pwa/commit/ac7c24f731abf9573ad93d534d84b9f7c1b16a2b))
 
 # [2.104.0](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/graphcms-ui@2.103.30...@graphcommerce/graphcms-ui@2.104.0) (2021-10-27)
 
-
 ### Features
 
-* **nextjs:** upgraded to nextjs 12 ([9331bc8](https://github.com/ho-nl/m2-pwa/commit/9331bc801f6419522115cc47d291d49d608d5a90))
-
-
-
-
+- **nextjs:** upgraded to nextjs 12
+  ([9331bc8](https://github.com/ho-nl/m2-pwa/commit/9331bc801f6419522115cc47d291d49d608d5a90))
 
 ## [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))
-
+- 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))
-
+- 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))
-
-
-
-
+- Revert "chore: upgrade @apollo/client"
+  ([55ff24e](https://github.com/ho-nl/m2-pwa/commit/55ff24ede0e56c85b8095edadadd1ec5e0b1b8d2))
 
 # Change Log
 

package/components/Asset/Asset.graphql

@@ -0,0 +1,7 @@
+fragment Asset on Asset @injectable {
+  url
+  width
+  height
+  mimeType
+  size
+}

package/components/Asset/index.tsx

@@ -0,0 +1,34 @@
+import { removeNull } from '@graphcommerce/graphql'
+import { Image, ImageProps } from '@graphcommerce/image'
+import { AssetFragment } from './Asset.gql'
+
+export type { AssetFragment } from './Asset.gql'
+
+type ImageAsset = Omit<AssetFragment, 'width' | 'height'> & {
+  width: number
+  height: number
+}
+
+function isImage(asset: AssetFragment): asset is ImageAsset {
+  return !!(asset.width && asset.height)
+}
+
+type AssetProps = {
+  asset: AssetFragment
+} & Omit<ImageProps, 'src' | 'width' | 'height' | 'alt'>
+
+export function Asset(props: AssetProps) {
+  const { asset, ...imgProps } = props
+
+  if (isImage(asset)) {
+    const { url, height, mimeType, size, width, ...assetProps } = removeNull(asset)
+    return <Image src={url} height={height} width={width} {...imgProps} {...assetProps} />
+  }
+
+  if (asset.mimeType === 'video/mp4') {
+    return <video src={asset.url} autoPlay muted loop playsInline disableRemotePlayback />
+  }
+
+  if (process.env.NODE_ENV !== 'production') return <div>{asset.mimeType} not supported</div>
+  return null
+}

package/components/RichText/RichText.tsx

@@ -0,0 +1,117 @@
+import { SxProps, Theme } from '@mui/material'
+import { defaultRenderers } from './defaultRenderers'
+import { defaultSxRenderer } from './defaultSxRenderer'
+import {
+  AdditionalProps,
+  Renderers,
+  SxRenderer,
+  TextNode,
+  ElementOrTextNode,
+  ElementNode,
+} from './types'
+
+const RenderText = ({ classes, text, ...textProps }: TextNode) => {
+  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: ElementOrTextNode): node is TextNode {
+  return (node as TextNode).text !== undefined
+}
+
+export function isElementNode(node: ElementOrTextNode): node is ElementNode {
+  return (node as ElementNode).children !== undefined
+}
+
+function RenderNode(node: ElementOrTextNode & AdditionalProps) {
+  if (isTextNode(node)) {
+    return <RenderText {...node} />
+  }
+  if (isElementNode(node)) {
+    // eslint-disable-next-line @typescript-eslint/no-use-before-define
+    return <RenderElement {...node} />
+  }
+
+  if (process.env.NODE_ENV !== 'production') {
+    console.error(node)
+    throw Error(`RichText: Node not recognized`)
+  }
+
+  return null
+}
+
+function RenderChildren({
+  childNodes,
+  ...props
+}: { childNodes: ElementNode['children'] } & AdditionalProps) {
+  return (
+    <>
+      {childNodes.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} {...props} key={key} />
+      ))}
+    </>
+  )
+}
+
+function RenderElement(element: ElementNode & AdditionalProps) {
+  const { type, children, sxRenderer, renderers, ...props } = element
+
+  // todo: this has the any type, could be improved
+  const Component = renderers[type]
+  const sx = sxRenderer?.[type] ?? []
+
+  if (Component) {
+    return (
+      <Component {...props} sx={[sxRenderer.all, ...(Array.isArray(sx) ? sx : [sx])]}>
+        <RenderChildren childNodes={children} sxRenderer={sxRenderer} renderers={renderers} />
+      </Component>
+    )
+  }
+
+  if (process.env.NODE_ENV !== 'production') {
+    console.error(element)
+    throw Error(`RichText: Unknown Element: ${element.type}`)
+  }
+  return <RenderChildren childNodes={children} sxRenderer={sxRenderer} renderers={renderers} />
+}
+
+export type RichTextProps = { raw: ElementNode } & {
+  renderers?: Partial<Renderers>
+  sxRenderer?: SxRenderer
+}
+
+export function mergeSxRenderer(base: SxRenderer, sxRenderer?: SxRenderer) {
+  if (!sxRenderer) return base
+
+  return Object.fromEntries(
+    Object.entries<SxProps<Theme>>(base).map(([key, sx]) => {
+      const sxOverride: SxProps<Theme> = sxRenderer?.[key]
+
+      return sxOverride
+        ? [
+            key,
+            [
+              ...(Array.isArray(sx) ? sx : [sx]),
+              ...(Array.isArray(sxOverride) ? sxOverride : [sxOverride]),
+            ],
+          ]
+        : [key, sx]
+    }),
+  ) as SxRenderer
+}
+
+export function RichText({ raw, sxRenderer, renderers }: RichTextProps) {
+  return (
+    <RenderChildren
+      childNodes={raw.children}
+      sxRenderer={mergeSxRenderer(defaultSxRenderer, sxRenderer)}
+      renderers={{ ...defaultRenderers, ...renderers }}
+    />
+  )
+}

package/components/RichText/defaultRenderers.tsx

@@ -0,0 +1,42 @@
+import { Box, Typography, Link } from '@mui/material'
+import PageLink from 'next/link'
+import { Asset } from '../Asset'
+import { Renderers } from './types'
+
+export const defaultRenderers: Renderers = {
+  'heading-one': (props) => <Typography variant='h1' {...props} />,
+  'heading-two': (props) => <Typography variant='h2' {...props} />,
+  'heading-three': (props) => <Typography variant='h3' {...props} />,
+  'heading-four': (props) => <Typography variant='h4' {...props} />,
+  'heading-five': (props) => <Typography variant='h5' {...props} />,
+  'heading-six': (props) => <Typography variant='h6' {...props} />,
+  paragraph: (props) => <Typography variant='body1' gutterBottom {...props} />,
+  'bulleted-list': (props) => <Box component='ul' {...props} />,
+  'numbered-list': (props) => <Box component='ol' {...props} />,
+  'list-item': (props) => <Box component='li' {...props} />,
+  'list-item-child': (props) => <Box component='span' {...props} />,
+  'block-quote': (props) => <Box component='blockquote' {...props} />,
+  iframe: (props) => (
+    // todo add security attributes to iframe
+    // todo make iframe responsive (generic IFrame component?)
+    <Box component='iframe' title='embedded content' loading='lazy' {...props} />
+  ),
+  image: ({ src, width, height, title, mimeType }) => (
+    <Asset asset={{ url: src, alt: title, width, height, mimeType }} />
+  ),
+  video: ({ src, width, height, title, mimeType }) => (
+    <Asset asset={{ url: src, alt: title, width, height, mimeType }} />
+  ),
+  link: ({ href, ...props }) => (
+    <PageLink href={href} passHref>
+      <Link underline='hover' {...props} />
+    </PageLink>
+  ),
+  table: (props) => <Box component='table' {...props} />,
+  table_head: (props) => <Box component='thead' {...props} />,
+  table_header_cell: (props) => <Box component='th' {...props} />,
+  table_body: (props) => <Box component='tbody' {...props} />,
+  table_row: (props) => <Box component='tr' {...props} />,
+  table_cell: (props) => <Box component='td' {...props} />,
+  code: (props) => <Box component='code' {...props} />,
+}

package/components/RichText/defaultSxRenderer.ts

@@ -0,0 +1,103 @@
+import { SxRenderer } from './types'
+
+export const defaultSxRenderer: SxRenderer = {
+  all: {
+    '&:empty': {
+      display: 'none',
+    },
+    '&:last-of-type': { marginBottom: 0 },
+  },
+  paragraph: {
+    marginBottom: '1em',
+    wordBreak: 'break-word',
+  },
+  'heading-one': {
+    marginTop: '0.5em',
+    marginBottom: '0.5em',
+  },
+  'heading-two': {
+    marginTop: '0.5em',
+    marginBottom: '0.5em',
+    '&:first-of-type': { marginTop: 0 },
+  },
+  'heading-three': {
+    marginTop: '0.5em',
+    marginBottom: '0.5em',
+    '&:first-of-type': { marginTop: 0 },
+  },
+  'heading-four': {
+    marginTop: '0.5em',
+    marginBottom: '0.5em',
+    '&:first-of-type': { marginTop: 0 },
+  },
+  'heading-five': {
+    marginTop: '0.5em',
+    marginBottom: '0.5em',
+    '&:first-of-type': { marginTop: 0 },
+  },
+  image: {
+    width: '100%',
+    height: 'auto',
+  },
+  video: {
+    width: '100%',
+    height: 'auto',
+  },
+  'block-quote': (theme) => ({
+    paddingLeft: theme.spacings.sm,
+    margin: `${theme.spacings.md} 0`,
+  }),
+  'bulleted-list': {
+    marginBottom: '1em',
+  },
+  'numbered-list': {
+    marginBottom: '1em',
+  },
+  code: {
+    width: 'fit-content',
+    maxWidth: '100%',
+    padding: 5,
+    overflow: 'scroll',
+  },
+  table: (theme) => ({
+    display: 'table',
+    width: '100%',
+    borderSpacing: '2px',
+    borderCollapse: 'collapse',
+    marginTop: theme.spacings.md,
+    marginBottom: theme.spacings.sm,
+    '& thead, tbody': {
+      '& td': {
+        padding: '10px 20px',
+      },
+    },
+    '& thead': {
+      '& tr': {
+        '& td': {
+          '& p': {
+            fontWeight: theme.typography.fontWeightBold,
+          },
+        },
+      },
+    },
+    '& tbody': {
+      display: 'table-row-group',
+      verticalAlign: 'center',
+      borderColor: 'inherit',
+      '& tr': {
+        '&:nth-of-type(odd)': {
+          background: theme.palette.background.paper,
+        },
+      },
+      '& td': {
+        [theme.breakpoints.up('sm')]: {
+          minWidth: '150px',
+        },
+        '& p': {},
+      },
+    },
+  }),
+  link: {
+    wordBreak: 'break-word',
+  },
+}

package/{RichText → components/RichText}/getNodeLength.tsx

@@ -1,6 +1,7 @@
-import { isElementNode, isTextNode, Node } from '.'
+import { isElementNode, isTextNode } from './RichText'
+import { ElementOrTextNode } from './types'
 
-export default function getNodeLength(node: Node): number {
+export function getNodeLength(node: ElementOrTextNode): number {
   if (isElementNode(node))
     return node.children.map(getNodeLength).reduce<number>((prev, curr) => prev + curr, 0)
 

package/components/RichText/index.ts

@@ -0,0 +1,2 @@
+export * from './RichText'
+export * from './getNodeLength'

package/components/RichText/types.ts

@@ -0,0 +1,92 @@
+import { SxProps, Theme } from '@mui/material'
+import { LiteralUnion } from 'type-fest'
+
+type BaseElementTypes =
+  | '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_header_cell'
+  | 'table_body'
+  | 'table_row'
+  | 'table_cell'
+  | 'code'
+
+type SimpleElement = {
+  children: ElementOrTextNode[]
+  type: LiteralUnion<BaseElementTypes, string>
+}
+
+export type TextNode = {
+  text: string
+  bold?: true
+  italic?: true
+  underlined?: true
+  [key: string]: unknown
+}
+
+type LinkElement = {
+  type: 'link'
+  children: ElementOrTextNode[]
+  href: string
+}
+
+type ImageElement = {
+  type: 'image'
+  children: ElementOrTextNode[]
+  src: string
+  title: string
+  width: number
+  height: number
+  mimeType: string
+}
+
+type VideoElement = {
+  type: 'image'
+  children: ElementOrTextNode[]
+  src: string
+  title: string
+  width: number
+  height: number
+  mimeType: string
+}
+
+type IframeElement = {
+  type: 'iframe'
+  children: ElementOrTextNode[]
+  src: string
+}
+
+export type ElementNode = SimpleElement | LinkElement | ImageElement | VideoElement | IframeElement
+export type ElementOrTextNode = ElementNode | TextNode
+
+type RendererBase = { sx?: SxProps<Theme>; children?: React.ReactNode }
+type Renderer<P extends ElementNode> = (
+  props: Omit<P, 'children'> & RendererBase,
+) => React.ReactElement | null
+
+export type Renderers = {
+  [k in BaseElementTypes]: Renderer<SimpleElement>
+} & {
+  link: Renderer<LinkElement>
+  image: Renderer<ImageElement>
+  video: Renderer<VideoElement>
+  iframe: Renderer<IframeElement>
+}
+
+export type SxRenderer = {
+  [k in keyof Renderers | 'all']?: SxProps<Theme>
+}
+
+export type AdditionalProps = { renderers: Renderers; sxRenderer: SxRenderer }

package/index.ts

@@ -1 +1,2 @@
-export {}
+export * from './components/RichText'
+export * from './components/Asset'

package/package.json

@@ -1,11 +1,8 @@
 {
   "name": "@graphcommerce/graphcms-ui",
-  "version": "2.106.39",
+  "version": "3.0.0",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
-  "browserslist": [
-    "extends @graphcommerce/browserslist-config-pwa"
-  ],
   "eslintConfig": {
     "extends": "@graphcommerce/eslint-config-pwa",
     "parserOptions": {
@@ -13,22 +10,19 @@
     }
   },
   "devDependencies": {
-    "@graphcommerce/browserslist-config-pwa": "^3.0.3",
-    "@graphcommerce/eslint-config-pwa": "^3.1.10",
-    "@graphcommerce/prettier-config-pwa": "^3.0.5",
-    "@graphcommerce/typescript-config-pwa": "^3.1.2",
-    "@playwright/test": "^1.17.1"
+    "@graphcommerce/eslint-config-pwa": "^4.0.0",
+    "@graphcommerce/prettier-config-pwa": "^4.0.0",
+    "@graphcommerce/typescript-config-pwa": "^4.0.0",
+    "@playwright/test": "^1.18.1"
   },
   "dependencies": {
-    "@apollo/client": "^3.5.6",
-    "@graphcommerce/image": "^2.105.13",
-    "@graphcommerce/next-ui": "^3.25.3",
-    "@material-ui/core": "^4.12.3",
-    "@material-ui/lab": "^4.0.0-alpha.60",
-    "next": "^12.0.7",
+    "@graphcommerce/graphql": "^3.0.0",
+    "@graphcommerce/image": "^3.0.0",
+    "@graphcommerce/next-ui": "^4.0.0",
+    "@mui/material": "^5.4.1",
+    "next": "^12.0.10",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "type-fest": "^2.8.0"
-  },
-  "gitHead": "41e42c8cd6f565ab0cbba81a1954a0041dc46768"
+    "type-fest": "^2.11.2"
+  }
 }

package/RichText/RichTextColumns.tsx

@@ -1,22 +0,0 @@
-import { UseStyles } from '@graphcommerce/next-ui'
-import { makeStyles, Theme } from '@material-ui/core'
-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

@@ -1,18 +0,0 @@
-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

@@ -1,22 +0,0 @@
-import { breakpointVal } from '@graphcommerce/next-ui'
-import { Theme, withStyles } from '@material-ui/core'
-import RichText from '.'
-
-const RichTextHeadingStrongStroked = withStyles((theme: Theme) => ({
-  h2: {
-    ...theme.typography.h1,
-    textTransform: 'uppercase',
-    color: theme.palette.text.primary,
-    [theme.breakpoints.up('sm')]: {
-      ...breakpointVal('fontSize', 36, 82, theme.breakpoints.values),
-    },
-    '& strong': {
-      // https://github.com/rsms/inter/issues/292#issuecomment-674993644
-      color: theme.palette.background.default,
-      textShadow: `1.2px 0 0 ${theme.palette.text.primary},0 1.2px 0 ${theme.palette.text.primary},-1.2px 0 0 ${theme.palette.text.primary},0 -1.2px 0 ${theme.palette.text.primary}`,
-    },
-    [theme.breakpoints.up('md')]: {},
-  },
-}))(RichText)
-
-export default RichTextHeadingStrongStroked

package/RichText/RichTextHero.tsx

@@ -1,27 +0,0 @@
-import { breakpointVal } from '@graphcommerce/next-ui'
-import { Theme, withStyles } from '@material-ui/core'
-import RichText from '.'
-
-const RichTextHero = withStyles((theme: Theme) => ({
-  h1: {
-    ...theme.typography.h1,
-    textTransform: 'uppercase',
-    maxWidth: '70%',
-    textAlign: 'center',
-    margin: 0,
-    marginBottom: theme.spacings.md,
-    [theme.breakpoints.up('sm')]: {
-      ...breakpointVal('fontSize', 36, 82, theme.breakpoints.values),
-    },
-    [theme.breakpoints.up('md')]: {
-      textAlign: 'left',
-      maxWidth: '100%',
-    },
-    '& strong': {
-      WebkitTextFillColor: 'transparent',
-      WebkitTextStroke: `1.2px #fff`,
-    },
-  },
-}))(RichText)
-
-export default RichTextHero

package/RichText/RichTextParagraphStrongStroked.tsx

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

package/RichText/RichTextQuote.tsx

@@ -1,21 +0,0 @@
-import { Theme, withStyles } from '@material-ui/core'
-import RichText from '.'
-
-const RichTextQuote = withStyles((theme: Theme) => ({
-  paragraph: {
-    ...theme.typography.h4,
-    fontWeight: 600,
-    '@supports (font-variation-settings: normal)': {
-      fontVariationSettings: "'wght' 620",
-    },
-    textTransform: 'uppercase',
-    maxWidth: '60%',
-    textAlign: 'center',
-    margin: '0 auto',
-    [theme.breakpoints.up('lg')]: {
-      maxWidth: '80%',
-    },
-  },
-}))(RichText)
-
-export default RichTextQuote

package/RichText/RichTextSpread.tsx

@@ -1,14 +0,0 @@
-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/index.tsx

@@ -1,325 +0,0 @@
-import { Image } from '@graphcommerce/image'
-import { Link, Typography } from '@material-ui/core'
-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_header_cell'
-    | '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_header_cell':
-      return (
-        <th>
-          <RenderChildren {...element} classes={classes} />
-        </th>
-      )
-    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:
-      if (process.env.NODE_ENV !== 'production') {
-        console.error(element)
-        throw Error(`RichText: Unknown Element: ${element.type}`)
-      }
-      return <RenderChildren {...element} classes={classes} />
-  }
-}
-
-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

@@ -1,118 +0,0 @@
-import { UseStyles, responsiveVal } from '@graphcommerce/next-ui'
-import { makeStyles, Theme } from '@material-ui/core'
-
-const useRichTextStyles = makeStyles(
-  (theme: Theme) => ({
-    root: {
-      '&:empty': {
-        display: 'none',
-      },
-      '&:last-child': {
-        marginBottom: 0,
-      },
-    },
-    paragraph: {
-      marginBottom: '1em',
-      wordBreak: 'break-word',
-    },
-    h1: {
-      marginTop: '0.5em',
-      marginBottom: '0.5em',
-    },
-    h2: {
-      marginTop: '0.5em',
-      marginBottom: '0.5em',
-      '&:first-child': { marginTop: 0 },
-    },
-    h3: {
-      marginTop: '0.5em',
-      marginBottom: '0.5em',
-      '&: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: {
-      paddingLeft: theme.spacings.sm,
-      margin: `${theme.spacings.md} 0`,
-    },
-    ol: {
-      marginBottom: '1em',
-    },
-    ul: {
-      marginBottom: '1em',
-    },
-    strong: {},
-    italic: {},
-    underlined: {},
-    code: {
-      width: 'fit-content',
-      maxWidth: '100%',
-      padding: 5,
-      overflow: 'scroll',
-    },
-    iframe: {},
-    aspectContainer: {},
-    table: {
-      display: 'table',
-      width: '100%',
-      borderSpacing: '2px',
-      borderCollapse: 'collapse',
-      marginTop: theme.spacings.md,
-      marginBottom: theme.spacings.sm,
-      '& thead, tbody': {
-        '& td': {
-          padding: '10px 20px',
-        },
-      },
-      '& thead': {
-        '& tr': {
-          '& td': {
-            '& p': {
-              fontWeight: theme.typography.fontWeightBold,
-            },
-          },
-        },
-      },
-      '& tbody': {
-        display: 'table-row-group',
-        verticalAlign: 'center',
-        borderColor: 'inherit',
-        '& tr': {
-          '&:nth-child(odd)': {
-            background: theme.palette.background.paper,
-          },
-        },
-        '& td': {
-          [theme.breakpoints.up('sm')]: {
-            minWidth: '150px',
-          },
-          '& p': {},
-        },
-      },
-    },
-    link: {
-      wordBreak: 'break-word',
-    },
-  }),
-  { name: 'RichText' },
-)
-export type UseRichTextStyles = UseStyles<typeof useRichTextStyles>
-
-export default useRichTextStyles