@graphcommerce/graphcms-ui 3.0.9 → 3.0.12

package/CHANGELOG.md

@@ -1,5 +1,34 @@
 # Change Log
 
+## 3.0.12
+
+### Patch Changes
+
+- [#1399](https://github.com/graphcommerce-org/graphcommerce/pull/1399) [`fb277d8e1`](https://github.com/graphcommerce-org/graphcommerce/commit/fb277d8e1e3612c5e9cf890a30d19cfd1ff70542) Thanks [@paales](https://github.com/paales)! - Now using [@graphql-yoga](https://github.com/dotansimha/graphql-yoga) for GraphQL which has full support for [envelop](https://www.envelop.dev/) plugins.
+
+* [#1399](https://github.com/graphcommerce-org/graphcommerce/pull/1399) [`fb277d8e1`](https://github.com/graphcommerce-org/graphcommerce/commit/fb277d8e1e3612c5e9cf890a30d19cfd1ff70542) Thanks [@paales](https://github.com/paales)! - Added a new @graphcommerce/cli package to generate the mesh so it can be generated _inside_ the @graphcommerce/graphql-mesh package to allow for better future extensibility.
+
+- [#1399](https://github.com/graphcommerce-org/graphcommerce/pull/1399) [`da0ae7d02`](https://github.com/graphcommerce-org/graphcommerce/commit/da0ae7d0236e4908ba0bf0fa16656be516e841d4) Thanks [@paales](https://github.com/paales)! - Updated dependencies
+
+- Updated dependencies [[`fb277d8e1`](https://github.com/graphcommerce-org/graphcommerce/commit/fb277d8e1e3612c5e9cf890a30d19cfd1ff70542), [`fb277d8e1`](https://github.com/graphcommerce-org/graphcommerce/commit/fb277d8e1e3612c5e9cf890a30d19cfd1ff70542), [`da0ae7d02`](https://github.com/graphcommerce-org/graphcommerce/commit/da0ae7d0236e4908ba0bf0fa16656be516e841d4)]:
+  - @graphcommerce/graphql@3.1.0
+  - @graphcommerce/next-ui@4.6.1
+  - @graphcommerce/image@3.1.5
+
+## 3.0.11
+
+### Patch Changes
+
+- [#1392](https://github.com/graphcommerce-org/graphcommerce/pull/1392) [`123d441ac`](https://github.com/graphcommerce-org/graphcommerce/commit/123d441acb74706d08e453abae4a6a8dad3130e0) Thanks [@carlocarels90](https://github.com/carlocarels90)! - add missing fields to the iframe renderer
+
+## 3.0.10
+
+### Patch Changes
+
+- Updated dependencies [[`3c801f45c`](https://github.com/graphcommerce-org/graphcommerce/commit/3c801f45c7df55131acf30ae2fe0d2344830d480), [`3192fab82`](https://github.com/graphcommerce-org/graphcommerce/commit/3192fab82560e2211dfcacadc3b0b305260527d8), [`0e425e85e`](https://github.com/graphcommerce-org/graphcommerce/commit/0e425e85ee8fed280349317ee0440c7bceea5823), [`8a354d1cd`](https://github.com/graphcommerce-org/graphcommerce/commit/8a354d1cd4757497ddfc9b1969a0addbc8ff616b)]:
+  - @graphcommerce/next-ui@4.6.0
+  - @graphcommerce/image@3.1.4
+
 ## 3.0.9
 
 ### Patch Changes

package/components/RichText/defaultRenderers.tsx

@@ -16,11 +16,22 @@ export const defaultRenderers: Renderers = {
   '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} />
-  ),
+  iframe: (props) => {
+    const { url, width, height, sx = [] } = props
+    return (
+      // todo add security attributes to iframe
+      // todo make iframe responsive (generic IFrame component?)
+      <Box
+        component='iframe'
+        src={url}
+        loading='lazy'
+        sx={[
+          { aspectRatio: `${width} / ${height}`, width: '100%' },
+          ...(Array.isArray(sx) ? sx : [sx]),
+        ]}
+      />
+    )
+  },
   image: ({ src, width, height, title, mimeType }) => (
     <Asset asset={{ url: src, alt: title, width, height, mimeType }} />
   ),

package/components/RichText/defaultSxRenderer.ts

@@ -2,7 +2,7 @@ import { SxRenderer } from './types'
 
 export const defaultSxRenderer: SxRenderer = {
   all: {
-    '&:empty': {
+    '&:empty:not(iframe)': {
       display: 'none',
     },
   },
@@ -104,4 +104,5 @@ export const defaultSxRenderer: SxRenderer = {
   underlined: {
     textDecoration: 'underline',
   },
+  iframe: {},
 }

package/components/RichText/types.ts

@@ -1,5 +1,5 @@
 import { SxProps, Theme } from '@mui/material'
-import { LiteralUnion } from 'type-fest'
+import type { LiteralUnion } from 'type-fest'
 
 type BaseElementTypes =
   | 'heading-one'
@@ -69,7 +69,9 @@ type VideoElement = {
 type IframeElement = {
   type: 'iframe'
   children: ElementOrTextNode[]
-  src: string
+  url: string
+  width?: number
+  height?: number
 }
 
 export type ElementNode = SimpleElement | LinkElement | ImageElement | VideoElement | IframeElement

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/graphcms-ui",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "3.0.9",
+  "version": "3.0.12",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "eslintConfig": {
@@ -12,16 +12,16 @@
     }
   },
   "devDependencies": {
-    "@graphcommerce/eslint-config-pwa": "^4.1.4",
-    "@graphcommerce/prettier-config-pwa": "^4.0.5",
+    "@graphcommerce/eslint-config-pwa": "^4.1.5",
+    "@graphcommerce/prettier-config-pwa": "^4.0.6",
     "@graphcommerce/typescript-config-pwa": "^4.0.2",
-    "@playwright/test": "^1.20.1",
-    "type-fest": "2.12.1"
+    "@playwright/test": "^1.21.1",
+    "type-fest": "^2.12.2"
   },
   "dependencies": {
-    "@graphcommerce/graphql": "3.0.7",
-    "@graphcommerce/image": "3.1.3",
-    "@graphcommerce/next-ui": "4.5.1"
+    "@graphcommerce/graphql": "3.1.0",
+    "@graphcommerce/image": "3.1.5",
+    "@graphcommerce/next-ui": "4.6.1"
   },
   "peerDependencies": {
     "@mui/material": "5.5.3",