@graphcommerce/hygraph-ui 9.0.4-canary.8 → 9.1.0-canary.15

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # Change Log
 
+## 9.1.0-canary.15
+
+## 9.0.4-canary.14
+
+## 9.0.4-canary.13
+
+## 9.0.4-canary.12
+
+## 9.0.4-canary.11
+
+## 9.0.4-canary.10
+
+### Patch Changes
+
+- [#2487](https://github.com/graphcommerce-org/graphcommerce/pull/2487) [`cf9eafb`](https://github.com/graphcommerce-org/graphcommerce/commit/cf9eafb9d71991852510f632c692679810b9e76f) - Prepare the RichTex for embed and code-block ([@paales](https://github.com/paales))
+
+- [#2487](https://github.com/graphcommerce-org/graphcommerce/pull/2487) [`2085f0b`](https://github.com/graphcommerce-org/graphcommerce/commit/2085f0b30dfadd9ab589fde962f59e87b3f30b34) - Forward `<Asset unoptimized />` component to `<Image />` ([@paales](https://github.com/paales))
+
+## 9.0.4-canary.9
+
 ## 9.0.4-canary.8
 
 ## 9.0.4-canary.7

package/components/Asset/Asset.tsx

@@ -22,7 +22,7 @@ export type AssetProps = {
 } & Omit<ImageProps, 'src' | 'width' | 'height' | 'alt' | 'sx'>
 
 export const Asset = memo<AssetProps>((props) => {
-  const { asset, sx = [], ...imgProps } = props
+  const { asset, sx = [], unoptimized = false, ...imgProps } = props
 
   if (isImage(asset)) {
     const { url, height, mimeType, size, width, alt, ...assetProps } = asset
@@ -34,7 +34,7 @@ export const Asset = memo<AssetProps>((props) => {
         alt={alt ?? undefined}
         {...imgProps}
         {...assetProps}
-        unoptimized={mimeType === 'image/svg+xml'}
+        unoptimized={typeof unoptimized === 'boolean' ? unoptimized : mimeType === 'image/svg+xml'}
         sx={[...(Array.isArray(sx) ? sx : [sx])]}
       />
     )

package/components/RichText/RichText.tsx

@@ -56,10 +56,11 @@ function RenderText({
   last,
   ...textProps
 }: TextNode & AdditionalProps) {
-  let type: 'bold' | 'italic' | 'underlined' | undefined
+  let type: 'bold' | 'italic' | 'underlined' | 'code' | undefined
 
   if (textProps.bold) type = 'bold'
   if (textProps.italic) type = 'italic'
+  if (textProps.code) type = 'code'
   if (textProps.underlined) type = 'underlined'
 
   const sx = useRenderProps({ first, last, sxRenderer }, type)
@@ -98,7 +99,7 @@ function RenderNode(node: ElementOrTextNode & AdditionalProps) {
   return null
 }
 
-function RenderChildren({
+export function RenderChildren({
   childNodes,
   noMargin,
   ...props

package/components/RichText/defaultRenderers.tsx

@@ -55,4 +55,14 @@ export const defaultRenderers: Renderers = {
   italic: (props) => <Box component='em' fontStyle='italic' {...props} />,
   underlined: (props) => <Box component='span' {...props} />,
   class: (props) => <Box component='div' {...props} />,
+  'code-block': (props) => (
+    <Box component='pre'>
+      <Box component='code' {...props} />
+    </Box>
+  ),
+  embed: ({ id, nodeId, nodeType, children, isInline, ...props }) => (
+    <Box component={isInline ? 'span' : 'div'} {...props}>
+      {id} {nodeId} {nodeType} {children}
+    </Box>
+  ),
 }

package/components/RichText/types.ts

@@ -21,6 +21,7 @@ type BaseElementTypes =
   | 'table_row'
   | 'table_cell'
   | 'code'
+  | 'code-block'
   | 'bold'
   | 'italic'
   | 'underlined'
@@ -80,6 +81,15 @@ type IframeElement = {
   height?: number
 }
 
+type EmbedElement = {
+  type: 'embed'
+  children: ElementOrTextNode[]
+  id: string
+  nodeId: string
+  nodeType: string
+  isInline?: boolean
+}
+
 export type ElementNode =
   | SimpleElement
   | LinkElement
@@ -87,6 +97,8 @@ export type ElementNode =
   | VideoElement
   | IframeElement
   | ClassElement
+  | EmbedElement
+
 export type ElementOrTextNode = ElementNode | TextNode
 
 type RendererBase = { sx?: SxProps<Theme>; children?: React.ReactNode }
@@ -102,6 +114,7 @@ export type Renderers = {
   video: Renderer<VideoElement>
   iframe: Renderer<IframeElement>
   class: Renderer<ClassElement>
+  embed: Renderer<EmbedElement>
 }
 
 export type SxRenderer = {

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/hygraph-ui",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "9.0.4-canary.8",
+  "version": "9.1.0-canary.15",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "eslintConfig": {
@@ -12,13 +12,13 @@
     }
   },
   "peerDependencies": {
-    "@graphcommerce/ecommerce-ui": "^9.0.4-canary.8",
-    "@graphcommerce/eslint-config-pwa": "^9.0.4-canary.8",
-    "@graphcommerce/graphql": "^9.0.4-canary.8",
-    "@graphcommerce/image": "^9.0.4-canary.8",
-    "@graphcommerce/next-ui": "^9.0.4-canary.8",
-    "@graphcommerce/prettier-config-pwa": "^9.0.4-canary.8",
-    "@graphcommerce/typescript-config-pwa": "^9.0.4-canary.8",
+    "@graphcommerce/ecommerce-ui": "^9.1.0-canary.15",
+    "@graphcommerce/eslint-config-pwa": "^9.1.0-canary.15",
+    "@graphcommerce/graphql": "^9.1.0-canary.15",
+    "@graphcommerce/image": "^9.1.0-canary.15",
+    "@graphcommerce/next-ui": "^9.1.0-canary.15",
+    "@graphcommerce/prettier-config-pwa": "^9.1.0-canary.15",
+    "@graphcommerce/typescript-config-pwa": "^9.1.0-canary.15",
     "@mui/material": "^5.10.16",
     "next": "*",
     "react": "^18.2.0",