feat(lib): change preview dimension

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,18 +8,28 @@ import { UserContextRequester } from './UserContextRequester'
 import { PluginComponent } from './FieldPluginDemo'
 import { LanguageView } from './LanguageView'
 import { PromptAI } from './PromptAI'
+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} />
+      <Divider />
+      <PreviewDimension {...props} />
     </Stack>
   </Paper>
 )

packages/demo/src/components/PreviewDimension.tsx

@@ -0,0 +1,82 @@
+import { Button, Input, Stack, Typography, InputLabel } from '@mui/material'
+import { PluginComponent } from './FieldPluginDemo'
+import { useState } from 'react'
+
+export const PreviewDimension: PluginComponent = (props) => {
+  const { data, actions } = props
+
+  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: width,
+    })
+  }
+
+  return (
+    <Stack gap={2}>
+      <Typography variant="subtitle1">Dimension</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>
+      <InputLabel
+        htmlFor="field-plugin-custom-width"
+        shrink
+      >
+        Set custom width:
+      </InputLabel>
+      <Stack direction="row" spacing={2} >
+        <Input
+          id="field-plugin-custom-width"
+          fullWidth
+          type="number"
+          value={width}
+          onChange={(e) => setWidth(Number(e.target.value))}
+          placeholder="Custom Width"
+        />
+        <Button
+          fullWidth
+          variant="outlined"
+          color="secondary"
+          onClick={handleClickCustom}
+        >
+          Custom
+        </Button>
+      </Stack>
+    </Stack>
+  )
+}

packages/field-plugin/package.json

@@ -54,5 +54,8 @@
     "vite": "5.4.16",
     "vite-plugin-dts": "4.2.1",
     "vitest": "2.1.9"
+  },
+  "dependencies": {
+    "valibot": "1.1.0"
   }
 }

packages/field-plugin/src/createFieldPlugin/FieldPluginActions.ts

@@ -5,6 +5,7 @@ import type {
   ModalSize,
   PromptAIPayload,
   PromptAIResponse,
+  Dimension,
 } from '../messaging'
 import type { FieldPluginData } from './FieldPluginData'
 
@@ -20,6 +21,7 @@ export type PromptAI = (payload: PromptAIPayload) => Promise<PromptAIResponse>
 export type RequestUserContext = () => Promise<UserData>
 export type SelectAsset = () => Promise<Asset>
 export type Initialize<Content> = () => Promise<FieldPluginData<Content>>
+export type SetPreviewWidth = (previewWidth: Dimension) => Promise<void>
 
 export type FieldPluginActions<Content> = {
   setContent: SetContent<Content>
@@ -28,4 +30,5 @@ export type FieldPluginActions<Content> = {
   promptAI: PromptAI
   requestUserContext: RequestUserContext
   selectAsset: SelectAsset
+  setPreviewDimension: SetPreviewWidth
 }

packages/field-plugin/src/createFieldPlugin/createFieldPlugin.ts

@@ -55,6 +55,9 @@ export const createFieldPlugin: CreateFieldPlugin = ({
   const { uid, host } = params
 
   // ToDo: In development we need to load localhost:3300
+  // const origin = 'http://localhost:7070'
+  // const origin = 'http://localhost:3300'
+
   const origin =
     typeof targetOrigin === 'string'
       ? targetOrigin

packages/field-plugin/src/createFieldPlugin/createPluginActions/callbackQueue.ts

@@ -6,6 +6,7 @@ import type {
   LoadedMessage,
   OnMessage,
   StateChangedMessage,
+  PreviewDimensionChangeMessage,
 } from '../../messaging'
 import { getRandomUid } from '../../utils'
 
@@ -18,6 +19,7 @@ type CallbackMap = {
   stateChanged: Record<CallbackId, OnMessage<StateChangedMessage>>
   loaded: Record<CallbackId, OnMessage<LoadedMessage>>
   promptAI: Record<CallbackId, OnMessage<PromptAIResponseMessage>>
+  previewDimension: Record<CallbackId, OnMessage<PreviewDimensionChangeMessage>>
 }
 type CallbackType = keyof CallbackMap
 
@@ -29,6 +31,7 @@ export const callbackQueue = () => {
     stateChanged: {},
     loaded: {},
     promptAI: {},
+    previewDimension: {},
   }
 
   const pushCallback = <T extends CallbackType>(

packages/field-plugin/src/createFieldPlugin/createPluginActions/createPluginActions.ts

@@ -11,6 +11,7 @@ import {
   pluginLoadedMessage,
   getPluginPromptAIMessage,
   valueChangeMessage,
+  previewDimensionsChangeMessage,
   type OnAssetSelectMessage,
   type OnContextRequestMessage,
   type OnUserContextRequestMessage,
@@ -176,6 +177,18 @@ export const createPluginActions: CreatePluginActions = ({
           postToContainer(getUserContextMessage({ uid, callbackId }))
         })
       },
+      setPreviewDimension: (previewWidth) => {
+        return new Promise((resolve) => {
+          const callbackId = pushCallback('previewDimension', () => resolve())
+          postToContainer(
+            previewDimensionsChangeMessage({
+              uid,
+              callbackId,
+              data: previewWidth,
+            }),
+          )
+        })
+      },
     },
     messageCallbacks,
     onHeightChange,

packages/field-plugin/src/messaging/pluginMessage/pluginToContainerMessage/PreviewDimensionChangeMessage.test.ts

@@ -0,0 +1,184 @@
+import {
+  isPreviewDimensionChangeMessage,
+  previewDimensionsChangeMessage,
+  PreviewDimensionChangeMessage,
+} from './PreviewDimensionChangeMessage'
+import { isMessageToContainer } from './MessageToContainer'
+import { expect } from 'vitest'
+
+const uid = '-preview-abc-123'
+const callbackId = 'test-callback-id'
+const stub: PreviewDimensionChangeMessage = {
+  action: 'plugin-changed',
+  event: 'previewDimension',
+  uid,
+  data: {
+    tag: 'desktop',
+  },
+}
+
+describe('PreviewDimensionsChangeMessage', () => {
+  describe('validator', () => {
+    it('is a MessageToContainer', () => {
+      expect(isMessageToContainer(stub)).toEqual(true)
+    })
+    it('requires event to be "previewDimension"', () => {
+      expect(
+        isPreviewDimensionChangeMessage({
+          ...stub,
+          event: 'previewDimension',
+        }),
+      ).toEqual(true)
+      expect(
+        isPreviewDimensionChangeMessage({
+          ...stub,
+          event: 'somethingElse',
+        }),
+      ).toEqual(false)
+    })
+    test('that the data property is present', () => {
+      const { data: _data, ...withoutModel } = stub
+      expect(isPreviewDimensionChangeMessage(withoutModel)).toEqual(false)
+    })
+    test('that the data property can be one of the tagged objects', () => {
+      expect(
+        isPreviewDimensionChangeMessage({
+          ...stub,
+          data: {
+            tag: 'desktop',
+          },
+        }),
+      ).toEqual(true)
+      expect(
+        isPreviewDimensionChangeMessage({
+          ...stub,
+          data: {
+            tag: 'tablet',
+          },
+        }),
+      ).toEqual(true)
+      expect(
+        isPreviewDimensionChangeMessage({
+          ...stub,
+          data: {
+            tag: 'mobile',
+          },
+        }),
+      ).toEqual(true)
+      expect(
+        isPreviewDimensionChangeMessage({
+          ...stub,
+          data: {
+            tag: 'custom',
+            width: 1234,
+          },
+        }),
+      ).toEqual(true)
+    })
+    test('that the data property cannot be any value', () => {
+      expect(
+        isPreviewDimensionChangeMessage({
+          ...stub,
+          data: undefined,
+        }),
+      ).toEqual(false)
+      expect(
+        isPreviewDimensionChangeMessage({
+          ...stub,
+          data: null,
+        }),
+      ).toEqual(false)
+      expect(
+        isPreviewDimensionChangeMessage({
+          ...stub,
+          data: {},
+        }),
+      ).toEqual(false)
+      expect(
+        isPreviewDimensionChangeMessage({
+          ...stub,
+          data: 'a string',
+        }),
+      ).toEqual(false)
+      expect(
+        isPreviewDimensionChangeMessage({
+          ...stub,
+          data: true,
+        }),
+      ).toEqual(false)
+      expect(
+        isPreviewDimensionChangeMessage({
+          ...stub,
+          data: 123.123,
+        }),
+      ).toEqual(false)
+      expect(
+        isPreviewDimensionChangeMessage({
+          ...stub,
+          data: [],
+        }),
+      ).toEqual(false)
+    })
+  })
+  describe('constructor', () => {
+    it('includes the uid', () => {
+      expect(
+        previewDimensionsChangeMessage({
+          uid,
+          callbackId,
+          data: {
+            tag: 'desktop',
+          },
+        }),
+      ).toHaveProperty('uid', uid)
+    })
+    it('includes the data', () => {
+      expect(
+        previewDimensionsChangeMessage({
+          uid,
+          callbackId,
+          data: {
+            tag: 'desktop',
+          },
+        }),
+      ).toHaveProperty('data', {
+        tag: 'desktop',
+      })
+      expect(
+        previewDimensionsChangeMessage({
+          uid,
+          callbackId,
+          data: {
+            tag: 'tablet',
+          },
+        }),
+      ).toHaveProperty('data', {
+        tag: 'tablet',
+      })
+      expect(
+        previewDimensionsChangeMessage({
+          uid,
+          callbackId,
+          data: {
+            tag: 'mobile',
+          },
+        }),
+      ).toHaveProperty('data', {
+        tag: 'mobile',
+      })
+      expect(
+        previewDimensionsChangeMessage({
+          uid,
+          callbackId,
+          data: {
+            tag: 'custom',
+            width: 1234,
+          },
+        }),
+      ).toHaveProperty('data', {
+        tag: 'custom',
+        width: 1234,
+      })
+    })
+  })
+})