@graphcommerce/graphcms-ui 3.0.5 → 3.0.6

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # Change Log
 
+## 3.0.6
+
+### Patch Changes
+
+- [#1322](https://github.com/graphcommerce-org/graphcommerce/pull/1322) [`ae7385b94`](https://github.com/graphcommerce-org/graphcommerce/commit/ae7385b943e591fcd6fe9e5747f22e03a73e481a) Thanks [@paales](https://github.com/paales)! - RichText component’s first and last element should have no marginTop and marginBottom respectively unless withMargin is specified
+
+- Updated dependencies [[`5266388ea`](https://github.com/graphcommerce-org/graphcommerce/commit/5266388eaffda41592623ef7a3ddbbe03c8e0dad), [`9b35403d9`](https://github.com/graphcommerce-org/graphcommerce/commit/9b35403d9dbb2606ac7cf3bb641a0f9cc3d8a2ba), [`0298a0de1`](https://github.com/graphcommerce-org/graphcommerce/commit/0298a0de1d13e543c4124a6a099297b4e27e2b05), [`815132ea4`](https://github.com/graphcommerce-org/graphcommerce/commit/815132ea43937b4b84b59ec9974ac593cb4eb456), [`3326742a0`](https://github.com/graphcommerce-org/graphcommerce/commit/3326742a0dceb45f0cac4741ca09dc4d4f09ad90), [`7a3799bfc`](https://github.com/graphcommerce-org/graphcommerce/commit/7a3799bfc107f26aa9991a91db5f228e3476f4aa), [`9a77f88ed`](https://github.com/graphcommerce-org/graphcommerce/commit/9a77f88ed26cbecdae9a135c3cb234a5b7ecf4df), [`0eeaad304`](https://github.com/graphcommerce-org/graphcommerce/commit/0eeaad30461b1d5b486438f0287fa76d49429044), [`bc5213547`](https://github.com/graphcommerce-org/graphcommerce/commit/bc52135471479c83d989449dad24798112e898f4), [`3f1912f55`](https://github.com/graphcommerce-org/graphcommerce/commit/3f1912f553318d5888f8af2b841918ef4ae96a84), [`b6c68cda8`](https://github.com/graphcommerce-org/graphcommerce/commit/b6c68cda8836a1d0c78ef351899cec9ec1037385)]:
+  - @graphcommerce/next-ui@4.3.0
+
 ## 3.0.5
 
 ### Patch Changes

package/components/RichText/RichText.tsx

@@ -1,22 +1,59 @@
+/* eslint-disable @typescript-eslint/no-use-before-define */
 import { SxProps, Theme } from '@mui/material'
 import { defaultRenderers } from './defaultRenderers'
 import { defaultSxRenderer } from './defaultSxRenderer'
 import {
   AdditionalProps,
   Renderers,
+  Renderer,
   SxRenderer,
   TextNode,
   ElementOrTextNode,
   ElementNode,
+  SimpleElement,
 } from './types'
 
-function 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>
+const sxArr = (sxAny?: SxProps<Theme> | false) => {
+  if (!sxAny) return []
+  return Array.isArray(sxAny) ? sxAny : [sxAny]
+}
+
+function useRenderProps(
+  { first, last, sxRenderer }: Pick<AdditionalProps, 'first' | 'last' | 'sxRenderer'>,
+  type?: ElementNode['type'],
+) {
+  if (!type) return []
+  const sx: SxProps<Theme> = sxRenderer?.[type] ?? []
+
+  return [
+    ...sxArr(sxRenderer.all),
+    ...sxArr(sx),
+    ...sxArr(first && sxRenderer.first),
+    ...sxArr(last && sxRenderer.last),
+  ]
+}
+
+function RenderText({
+  text,
+  renderers,
+  sxRenderer,
+  first,
+  last,
+  ...textProps
+}: TextNode & AdditionalProps) {
+  let type: 'bold' | 'italic' | 'underlined' | undefined
+
+  if (textProps.bold) type = 'bold'
+  if (textProps.italic) type = 'italic'
+  if (textProps.underlined) type = 'underlined'
 
-  return result
+  const sx = useRenderProps({ first, last, sxRenderer }, type)
+
+  if (!type) return <>{text}</>
+
+  const Component: Renderer<SimpleElement> = renderers[type]
+
+  return <Component sx={sx}>{text}</Component>
 }
 
 export function isTextNode(node: ElementOrTextNode): node is TextNode {
@@ -46,29 +83,37 @@ function RenderNode(node: ElementOrTextNode & AdditionalProps) {
 
 function RenderChildren({
   childNodes,
+  noMargin,
   ...props
-}: { childNodes: ElementNode['children'] } & AdditionalProps) {
+}: { childNodes: ElementNode['children']; noMargin?: boolean } & 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} />
+        <RenderNode
+          {...node}
+          {...props}
+          // 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
+          key={key}
+          first={noMargin && key === 0}
+          last={noMargin && key === childNodes.length - 1}
+        />
       ))}
     </>
   )
 }
 
 function RenderElement(element: ElementNode & AdditionalProps) {
-  const { type, children, sxRenderer, renderers, ...props } = element
+  const { type, children, sxRenderer, renderers, first, last, ...props } = element
 
   // todo: this has the any type, could be improved
-  const Component = renderers[type]
-  const sx = sxRenderer?.[type] ?? []
+  const Component: Renderer<SimpleElement> = renderers[type]
+
+  const sx = useRenderProps({ first, last, sxRenderer }, type)
 
   if (Component) {
     return (
-      <Component {...props} sx={[sxRenderer.all, ...(Array.isArray(sx) ? sx : [sx])]}>
+      <Component {...props} sx={sx}>
         <RenderChildren childNodes={children} sxRenderer={sxRenderer} renderers={renderers} />
       </Component>
     )
@@ -81,12 +126,7 @@ function RenderElement(element: ElementNode & AdditionalProps) {
   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) {
+function mergeSxRenderer(base: SxRenderer, sxRenderer?: SxRenderer) {
   if (!sxRenderer) return base
 
   return Object.fromEntries(
@@ -106,12 +146,38 @@ export function mergeSxRenderer(base: SxRenderer, sxRenderer?: SxRenderer) {
   ) as SxRenderer
 }
 
-export function RichText({ raw, sxRenderer, renderers }: RichTextProps) {
+export type RichTextProps = { raw: ElementNode } & {
+  renderers?: Partial<Renderers>
+  /**
+   * Allows you to theme all the types of components
+   *
+   * ```tsx
+   * function MyComponent()f {
+   *   return <RichText
+   *     sxRenderer={{
+   *       paragraph: (theme) => ({
+   *         columnCount: { xs: 1, md: getColumnCount(props, 2) },
+   *         columnGap: theme.spacings.md,
+   *       }),
+   *       //other props here
+   *     }}
+   *   />
+   * }
+   * ```
+   */
+  sxRenderer?: SxRenderer
+
+  /** By default the component will render the first and last element without any margins */
+  withMargin?: boolean
+}
+
+export function RichText({ raw, sxRenderer, renderers, withMargin = false }: RichTextProps) {
   return (
     <RenderChildren
       childNodes={raw.children}
       sxRenderer={mergeSxRenderer(defaultSxRenderer, sxRenderer)}
       renderers={{ ...defaultRenderers, ...renderers }}
+      noMargin={!withMargin}
     />
   )
 }

package/components/RichText/defaultRenderers.tsx

@@ -39,4 +39,7 @@ export const defaultRenderers: Renderers = {
   table_row: (props) => <Box component='tr' {...props} />,
   table_cell: (props) => <Box component='td' {...props} />,
   code: (props) => <Box component='code' {...props} />,
+  bold: (props) => <Box component='strong' fontWeight='bold' {...props} />,
+  italic: (props) => <Box component='em' fontStyle='italic' {...props} />,
+  underlined: (props) => <Box component='span' {...props} />,
 }

package/components/RichText/defaultSxRenderer.ts

@@ -5,7 +5,12 @@ export const defaultSxRenderer: SxRenderer = {
     '&:empty': {
       display: 'none',
     },
-    '&:last-of-type': { marginBottom: 0 },
+  },
+  first: {
+    marginTop: 0,
+  },
+  last: {
+    marginBottom: 0,
   },
   paragraph: {
     marginBottom: '1em',
@@ -18,22 +23,18 @@ export const defaultSxRenderer: SxRenderer = {
   '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%',
@@ -100,4 +101,7 @@ export const defaultSxRenderer: SxRenderer = {
   link: {
     wordBreak: 'break-word',
   },
+  underlined: {
+    textDecoration: 'underline',
+  },
 }

package/components/RichText/types.ts

@@ -22,8 +22,11 @@ type BaseElementTypes =
   | 'table_row'
   | 'table_cell'
   | 'code'
+  | 'bold'
+  | 'italic'
+  | 'underlined'
 
-type SimpleElement = {
+export type SimpleElement = {
   children: ElementOrTextNode[]
   type: LiteralUnion<BaseElementTypes, string>
 }
@@ -72,8 +75,8 @@ export type ElementNode = SimpleElement | LinkElement | ImageElement | VideoElem
 export type ElementOrTextNode = ElementNode | TextNode
 
 type RendererBase = { sx?: SxProps<Theme>; children?: React.ReactNode }
-type Renderer<P extends ElementNode> = (
-  props: Omit<P, 'children'> & RendererBase,
+export type Renderer<P extends ElementNode> = (
+  props: Omit<P, 'children' | 'type'> & RendererBase,
 ) => React.ReactElement | null
 
 export type Renderers = {
@@ -86,7 +89,12 @@ export type Renderers = {
 }
 
 export type SxRenderer = {
-  [k in keyof Renderers | 'all']?: SxProps<Theme>
+  [k in keyof Renderers | 'all' | 'first' | 'last']?: SxProps<Theme>
 }
 
-export type AdditionalProps = { renderers: Renderers; sxRenderer: SxRenderer }
+export type AdditionalProps = {
+  renderers: Renderers
+  sxRenderer: SxRenderer
+  first?: boolean
+  last?: boolean
+}

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/graphcms-ui",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "3.0.5",
+  "version": "3.0.6",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "eslintConfig": {
@@ -20,7 +20,7 @@
   "dependencies": {
     "@graphcommerce/graphql": "^3.0.4",
     "@graphcommerce/image": "^3.1.1",
-    "@graphcommerce/next-ui": "^4.2.4",
+    "@graphcommerce/next-ui": "^4.3.0",
     "type-fest": "^2.12.0"
   },
   "peerDependencies": {