feat(shape-7912): add demo and sandbox modal sizing functionality

Author: Dawntraoz

packages/demo/src/components/ModalToggle.tsx

@@ -1,17 +1,53 @@
-import { Button, Stack, Typography } from '@mui/material'
+import { useState } from 'react'
+import { Button, Stack, Typography, Input, Grid } from '@mui/material'
 import { PluginComponent } from './FieldPluginDemo'
+import { ModalSize } from '@storyblok/field-plugin'
 
 export const ModalToggle: PluginComponent = (props) => {
   const { actions, data } = props
+  const [modalSize, setModalSize] = useState<ModalSize>({
+    width: '50%',
+    height: '100%',
+  })
+
   return (
     <Stack gap={2}>
       <Typography variant="subtitle1">Modal</Typography>
+      <Grid
+        container
+        spacing={2}
+      >
+        <Grid
+          xs={6}
+          item
+        >
+          <Typography>Set modal width: </Typography>
+          <Input
+            value={modalSize.width}
+            fullWidth
+            onChange={(e) =>
+              setModalSize({ ...modalSize, width: e.target.value })
+            }
+          />{' '}
+        </Grid>
+        <Grid
+          xs={6}
+          item
+        >
+          <Typography>Set modal height: </Typography>
+          <Input
+            value={modalSize.height}
+            fullWidth
+            onChange={(e) =>
+              setModalSize({ ...modalSize, height: e.target.value })
+            }
+          />
+        </Grid>
+      </Grid>
       <Button
         variant="outlined"
         color="secondary"
-        onClick={() =>
-          actions.setModalOpen(!data.isModalOpen, { width: '50%' })
-        }
+        onClick={() => actions.setModalOpen(!data.isModalOpen, modalSize)}
       >
         Toggle Modal
       </Button>

packages/demo/src/components/NonModalView.tsx

@@ -13,7 +13,6 @@ export const NonModalView: PluginComponent = (props) => (
     <Stack gap={6}>
       <ModalToggle {...props} />
       <ValueMutator {...props} />
-      <ModalToggle {...props} />
       <AssetSelector {...props} />
       <ContextRequester {...props} />
       <UserContextRequester {...props} />

packages/sandbox/src/components/FieldPluginSandbox.tsx

@@ -119,6 +119,8 @@ const useSandbox = (
   // TODO replace with useReducer
   const [subscribeState, setSubscribeState] = useState<boolean>(false)
   const [isModalOpen, setModalOpen] = useState(false)
+  const [modalHeight, setModalHeight] = useState<string>('')
+  const [modalWidth, setModalWidth] = useState<string>('')
   const [height, setHeight] = useState(initialHeight)
   const [fullHeight, setFullHeight] = useState(false)
   const [enablePortalModal, setEnablePortalModal] = useState(false)
@@ -226,8 +228,12 @@ const useSandbox = (
     (message: ModalChangeMessage) => {
       setModalOpen(message.status)
       setStateChangedCallbackId(message.callbackId)
+      if (message.modalSize) {
+        setModalHeight(message.modalSize.height || '')
+        setModalWidth(message.modalSize.width || '')
+      }
     },
-    [setModalOpen, setStateChangedCallbackId],
+    [setModalOpen, setStateChangedCallbackId, setModalHeight, setModalWidth],
   )
 
   const onHeightChange = useCallback(
@@ -357,6 +363,8 @@ const useSandbox = (
       height,
       fullHeight,
       modalState,
+      modalHeight,
+      modalWidth,
       schema,
       url,
       fieldTypeIframe,
@@ -380,6 +388,8 @@ export const FieldPluginSandbox: FunctionComponent = () => {
       content,
       language,
       modalState,
+      modalHeight,
+      modalWidth,
       fullHeight,
       height,
       schema,
@@ -420,6 +430,8 @@ export const FieldPluginSandbox: FunctionComponent = () => {
               src={iframeSrc}
               height={height}
               modalState={modalState}
+              modalHeight={modalHeight}
+              modalWidth={modalWidth}
               fullHeight={fullHeight}
               ref={fieldTypeIframe}
               onModalChange={setModalOpen}

packages/sandbox/src/components/FieldTypePreview.tsx

@@ -134,14 +134,23 @@ export const FieldTypePreview = forwardRef<
     src: string | undefined
     height: number
     modalState: ModalState
+    modalHeight: string
+    modalWidth: string
     fullHeight: boolean
     // Allows the iframe to be refreshed
     iframeKey?: number
     sx?: SxProps
     onModalChange: (isModal: boolean) => void
   }
 >(function FieldTypePreview(props, ref) {
-  const { height, fullHeight, modalState, onModalChange } = props
+  const {
+    height,
+    fullHeight,
+    modalState,
+    modalHeight,
+    modalWidth,
+    onModalChange,
+  } = props
 
   const setTeleported = (el: HTMLIFrameElement | null) => {
     if (modalState === 'modal-with-portal') {
@@ -164,8 +173,13 @@ export const FieldTypePreview = forwardRef<
       <Dialog
         open={modalState === 'modal-with-portal'}
         fullScreen
+        style={{
+          maxWidth: modalWidth,
+          maxHeight: modalHeight,
+        }}
         sx={{
           padding: 10,
+          margin: '0 auto',
         }}
         PaperProps={{
           sx: {