@graphcommerce/graphcms-ui 2.106.39 → 3.0.2

package/CHANGELOG.md

@@ -1,158 +1,194 @@
 # 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.2
 
-## [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)
+### Patch Changes
 
+- [#1276](https://github.com/ho-nl/m2-pwa/pull/1276)
+  [`ce09388e0`](https://github.com/ho-nl/m2-pwa/commit/ce09388e0d7ef33aee660612340f6fbae15ceec2)
+  Thanks [@paales](https://github.com/paales)! - We've moved lots of internal packages from
+  `dependencies` to `peerDependencies`. The result of this is that there will be significantly less
+  duplicate packages in the node_modules folders.
 
-### Bug Fixes
+* [#1276](https://github.com/ho-nl/m2-pwa/pull/1276)
+  [`52a45bba4`](https://github.com/ho-nl/m2-pwa/commit/52a45bba4dc6dd6df3c81f5023df7d23ed8a534d)
+  Thanks [@paales](https://github.com/paales)! - Upgraded to
+  [NextJS 12.1](https://nextjs.org/blog/next-12-1)! This is just for compatibility, but we'll be
+  implementing
+  [On-demand Incremental Static Regeneration](https://nextjs.org/blog/next-12-1#on-demand-incremental-static-regeneration-beta)
+  soon.
 
-* 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))
+  This will greatly reduce the requirement to rebuid stuff and we'll add a management UI on the
+  frontend to be able to revalidate pages manually.
 
+* Updated dependencies
+  [[`381e4c86a`](https://github.com/ho-nl/m2-pwa/commit/381e4c86a8321ce96e1fa5c7d3c0a0c0ff3e02c7),
+  [`ce09388e0`](https://github.com/ho-nl/m2-pwa/commit/ce09388e0d7ef33aee660612340f6fbae15ceec2),
+  [`e7c8e2756`](https://github.com/ho-nl/m2-pwa/commit/e7c8e2756d637cbcd2e793d62ef5721d35d9fa7b),
+  [`52a45bba4`](https://github.com/ho-nl/m2-pwa/commit/52a45bba4dc6dd6df3c81f5023df7d23ed8a534d)]:
+  - @graphcommerce/next-ui@4.1.1
+  - @graphcommerce/graphql@3.0.2
+  - @graphcommerce/image@3.0.2
 
+## 3.0.1
 
+### Patch Changes
 
+- [`0cbaa878b`](https://github.com/ho-nl/m2-pwa/commit/0cbaa878b8a844d5abbeb1797b625a33130e6514)
+  Thanks [@paales](https://github.com/paales)! - Added homepage and repository package.json files,
+  so that the packages link to back to the website and repository
+- Updated dependencies
+  [[`0cbaa878b`](https://github.com/ho-nl/m2-pwa/commit/0cbaa878b8a844d5abbeb1797b625a33130e6514)]:
+  - @graphcommerce/graphql@3.0.1
+  - @graphcommerce/image@3.0.1
+  - @graphcommerce/next-ui@4.0.1
 
-# [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)
+## 3.0.0
 
+### Major Changes
 
-### Bug Fixes
+- [#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
 
-* 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)
+### Patch Changes
 
+- 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
 
-### Features
-
-* breakpointVal ([0294503](https://github.com/ho-nl/m2-pwa/commit/029450343051cf6995babad9f9b42c7e6ad1094e))
-* responsiveTyp ([6108b61](https://github.com/ho-nl/m2-pwa/commit/6108b6148e76ddbbe2db1614f10aaf88423db5ca))
+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)
 
-# [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)
+### 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)
 
 ### Features
 
-* added tons of translations ([9bb0ac7](https://github.com/ho-nl/m2-pwa/commit/9bb0ac709b58df6ea6141e92e4923a5ca9ae2963))
-
+- 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))
 
 ## [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'