feat: sandbox and demo

Author: johannes-lindgren

packages/demo/src/components/NonModalView.tsx

@@ -1,4 +1,4 @@
-import { Paper, Stack } from '@mui/material'
+import { Divider, Paper, Stack } from '@mui/material'
 import { ModalToggle } from './ModalToggle'
 import { ValueMutator } from './ValueMutator'
 import { HeightChangeDemo } from './HeightChangeDemo'
@@ -8,20 +8,28 @@ import { UserContextRequester } from './UserContextRequester'
 import { PluginComponent } from './FieldPluginDemo'
 import { LanguageView } from './LanguageView'
 import { PromptAI } from './PromptAI'
-import { PreviewWidth } from './PreviewWidth'
+import { PreviewDimension } from './PreviewDimension'
 
 export const NonModalView: PluginComponent = (props) => (
   <Paper>
     <Stack gap={6}>
       <ModalToggle {...props} />
+      <Divider />
       <ValueMutator {...props} />
+      <Divider />
       <AssetSelector {...props} />
+      <Divider />
       <ContextRequester {...props} />
+      <Divider />
       <UserContextRequester {...props} />
+      <Divider />
       <HeightChangeDemo {...props} />
+      <Divider />
       <LanguageView {...props} />
+      <Divider />
       <PromptAI {...props} />
-      <PreviewWidth {...props} />
+      <Divider />
+      <PreviewDimension {...props} />
     </Stack>
   </Paper>
 )

packages/demo/src/components/PreviewDimension.tsx

@@ -0,0 +1,77 @@
+import { Button, Input, Stack, Typography } from '@mui/material'
+import { PluginComponent } from './FieldPluginDemo'
+import { useState } from 'react'
+
+export const PreviewDimension: PluginComponent = (props) => {
+  const { data, actions } = props
+
+  const label =
+    typeof data.content === 'undefined'
+      ? 'undefined'
+      : JSON.stringify(data.content)
+
+  const [width, setWidth] = useState(300)
+
+  const handleClickMobile = () => {
+    actions.setPreviewDimension({
+      tag: 'mobile',
+    })
+  }
+  const handleClickTablet = () => {
+    actions.setPreviewDimension({
+      tag: 'tablet',
+    })
+  }
+  const handleClickDesktop = () => {
+    actions.setPreviewDimension({
+      tag: 'desktop',
+    })
+  }
+  const handleClickCustom = () => {
+    actions.setPreviewDimension({
+      tag: 'custom',
+      width: 1234,
+    })
+  }
+
+  return (
+    <Stack gap={2}>
+      <Typography variant="subtitle1">Field Value</Typography>
+      <Typography textAlign="center">{label}</Typography>
+      <Button
+        variant="outlined"
+        color="secondary"
+        onClick={handleClickMobile}
+      >
+        Mobile
+      </Button>
+      <Button
+        variant="outlined"
+        color="secondary"
+        onClick={handleClickTablet}
+      >
+        Tablet
+      </Button>
+      <Button
+        variant="outlined"
+        color="secondary"
+        onClick={handleClickDesktop}
+      >
+        Desktop
+      </Button>
+      <Button
+        variant="outlined"
+        color="secondary"
+        onClick={handleClickCustom}
+      >
+        Custom
+      </Button>
+      <Input
+        type="number"
+        value={width}
+        onChange={(e) => setWidth(Number(e.target.value))}
+        placeholder="Custom Width"
+      />
+    </Stack>
+  )
+}

packages/demo/src/components/PreviewWidth.tsx

@@ -26,6 +26,7 @@ import {
   UserData,
   urlSearchParamsFromPluginUrlParams,
   ValueChangeMessage,
+  PreviewDimensionChangeMessage,
 } from '@storyblok/field-plugin'
 import '@fontsource/roboto/300.css'
 import '@fontsource/roboto/400.css'
@@ -56,6 +57,7 @@ import { UrlView } from './UrlView'
 import { usePluginParams } from './usePluginParams'
 import { LanguageView } from './LanguageView'
 import { TranslatableCheckbox } from './TranslatableCheckbox'
+import { PreviewDimension } from './PreviewDimension'
 
 const defaultUrl = 'http://localhost:8080'
 const initialStory: StoryData = {
@@ -130,6 +132,11 @@ const useSandbox = (
     translatable: false,
   })
   const [content, setContent] = useState<unknown>(initialContent)
+  const [previewDimension, setPreviewDimension] = useState<
+    PreviewDimensionChangeMessage['data']
+  >({
+    tag: 'desktop',
+  })
   const [language, setLanguage] = useState<string>('default')
   const [stateChangedCallbackId, setStateChangedCallbackId] = useState<string>()
 
@@ -321,6 +328,13 @@ const useSandbox = (
     [onError],
   )
 
+  const onSetPreviewDimension = useCallback(
+    (message: PreviewDimensionChangeMessage) => {
+      setPreviewDimension(message.data)
+    },
+    [],
+  )
+
   useEffect(
     () =>
       createSandboxMessageListener(
@@ -333,6 +347,7 @@ const useSandbox = (
           requestUserContext: onUserContextRequested,
           selectAsset: onAssetSelected,
           promptAI: onPromptAI,
+          setPreviewDimension: onSetPreviewDimension,
         },
         {
           iframeOrigin: fieldPluginURL?.origin,
@@ -380,6 +395,7 @@ const useSandbox = (
       url,
       fieldTypeIframe,
       iframeSrc,
+      previewDimension,
     },
     {
       setContent,
@@ -407,6 +423,7 @@ export const FieldPluginSandbox: FunctionComponent = () => {
       url,
       fieldTypeIframe,
       iframeSrc,
+      previewDimension,
     },
     { setModalOpen, setContent, setLanguage, setSchema, setUrl, randomizeUid },
   ] = useSandbox(error)
@@ -526,6 +543,14 @@ export const FieldPluginSandbox: FunctionComponent = () => {
           />
         </AccordionDetails>
       </Accordion>
+      <Accordion defaultExpanded>
+        <AccordionSummary>
+          <Typography variant="h3">Data</Typography>
+        </AccordionSummary>
+        <AccordionDetails>
+          <PreviewDimension previewDimension={previewDimension} />
+        </AccordionDetails>
+      </Accordion>
     </Container>
   )
 }

packages/sandbox/src/components/FieldPluginSandbox.tsx

@@ -0,0 +1,44 @@
+import { FunctionComponent } from 'react'
+import { PreviewDimensionChangeMessage } from '@storyblok/field-plugin'
+import {
+  FormControl,
+  FormControlLabel,
+  FormLabel,
+  Radio,
+  RadioGroup,
+} from '@mui/material'
+
+export const PreviewDimension: FunctionComponent<{
+  previewDimension: PreviewDimensionChangeMessage['data']
+}> = (props) => {
+  const { previewDimension } = props
+
+  return (
+    <FormControl disabled>
+      <FormLabel id="demo-radio-buttons-group-label">
+        Preview Dimension
+      </FormLabel>
+      <RadioGroup
+        aria-labelledby="demo-radio-buttons-group-label"
+        name="radio-buttons-group"
+        value={previewDimension.tag}
+      >
+        <FormControlLabel
+          value="desktop"
+          control={<Radio />}
+          label="Desktop"
+        />
+        <FormControlLabel
+          value="tablet"
+          control={<Radio />}
+          label="Tablet"
+        />
+        <FormControlLabel
+          value="mobile"
+          control={<Radio />}
+          label="Mobile"
+        />
+      </RadioGroup>
+    </FormControl>
+  )
+}

packages/sandbox/src/components/PreviewDimension.tsx

@@ -6,8 +6,9 @@ import {
   isMessageToContainer,
   isModalChangeMessage,
   isPluginLoadedMessage,
-  isPreviewWidthChangeMessage,
   isValueChangeMessage,
+  isPluginPromptAIMessage,
+  isPreviewDimensionChangeMessage,
   type ModalChangeMessage,
   type PluginLoadedMessage,
   type PluginPromptAIMessage,
@@ -17,7 +18,6 @@ import {
   type GetContextMessage,
   type GetUserContextMessage,
   type HeightChangeMessage,
-  isPluginPromptAIMessage,
 } from '@storyblok/field-plugin'
 
 type SandboxActions = {
@@ -73,7 +73,7 @@ export const createSandboxMessageListener: CreateSandboxListener = (
       eventHandlers.promptAI(message)
     } else if (isGetUserContextMessage(message)) {
       eventHandlers.requestUserContext(message)
-    } else if (isPreviewWidthChangeMessage(message)) {
+    } else if (isPreviewDimensionChangeMessage(message)) {
       eventHandlers.setPreviewDimension(message)
     } else {
       console.warn(