@graphcommerce/graphcms-ui 2.106.39 → 3.0.2

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,10 @@
 {
   "name": "@graphcommerce/graphcms-ui",
-  "version": "2.106.39",
+  "homepage": "https://www.graphcommerce.org/",
+  "repository": "github:graphcommerce-org/graphcommerce",
+  "version": "3.0.2",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
-  "browserslist": [
-    "extends @graphcommerce/browserslist-config-pwa"
-  ],
   "eslintConfig": {
     "extends": "@graphcommerce/eslint-config-pwa",
     "parserOptions": {
@@ -13,22 +12,21 @@
     }
   },
   "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.2",
+    "@graphcommerce/prettier-config-pwa": "^4.0.1",
+    "@graphcommerce/typescript-config-pwa": "^4.0.1",
+    "@playwright/test": "^1.19.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",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "type-fest": "^2.8.0"
+    "@graphcommerce/graphql": "^3.0.2",
+    "@graphcommerce/image": "^3.0.2",
+    "@graphcommerce/next-ui": "^4.1.1",
+    "type-fest": "^2.11.2"
   },
-  "gitHead": "41e42c8cd6f565ab0cbba81a1954a0041dc46768"
+  "peerDependencies": {
+    "@mui/material": "^5.4.1",
+    "next": "^12.0.10",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.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} />
-}