feat(lib): change preview dimension (#463)

* feat: change preview dimension

* feat: sandbox and demo

* feat: add custom option to preview dimension selection

* docs: comment

* feat: update custom preview dimension width to dynamic value

* feat: reorganize the custom width on preview

* feat: create the dimension type

* chore: run prettier

* chore: remove pure-parse and add valibot

* chore: add custom label on sandbox

* feat: remove preview dimension callback from the queue list

---------

Co-authored-by: Fernanda Nogueira <[email protected]>
Co-authored-by: Demetrius Feijóo <[email protected]>

Author: 3 people

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,
+  PreviewDimensionResponseMessage,
 } from '../../messaging'
 import { getRandomUid } from '../../utils'
 
@@ -18,6 +19,10 @@ type CallbackMap = {
   stateChanged: Record<CallbackId, OnMessage<StateChangedMessage>>
   loaded: Record<CallbackId, OnMessage<LoadedMessage>>
   promptAI: Record<CallbackId, OnMessage<PromptAIResponseMessage>>
+  previewDimension: Record<
+    CallbackId,
+    OnMessage<PreviewDimensionResponseMessage>
+  >
 }
 type CallbackType = keyof CallbackMap
 
@@ -29,6 +34,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,
@@ -19,6 +20,7 @@ import {
   type OnUnknownPluginMessage,
   type OnPromptAIMessage,
   type PromptAIPayload,
+  type OnPreviewDimensionMessage,
 } from '../../messaging'
 import { FieldPluginActions, Initialize } from '../FieldPluginActions'
 import { pluginStateFromStateChangeMessage } from './partialPluginStateFromStateChangeMessage'
@@ -81,6 +83,10 @@ export const createPluginActions: CreatePluginActions = ({
     popCallback('promptAI', data.callbackId)?.(data)
   }
 
+  const onPreviewDimension: OnPreviewDimensionMessage = (data) => {
+    popCallback('previewDimension', data.callbackId)
+  }
+
   const onUnknownMessage: OnUnknownPluginMessage = (data) => {
     // TODO remove side-effect, making functions in this file pure.
     //  perhaps only show this message in development mode?
@@ -100,6 +106,7 @@ export const createPluginActions: CreatePluginActions = ({
     onUserContextRequest,
     onAssetSelect,
     onPromptAI,
+    onPreviewDimension,
     onUnknownMessage,
   }
 
@@ -176,6 +183,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/createFieldPlugin/createPluginActions/createPluginMessageListener/createPluginMessageListener.ts

@@ -6,6 +6,7 @@ import type {
   OnPromptAIMessage,
   OnStateChangeMessage,
   OnUnknownPluginMessage,
+  OnPreviewDimensionMessage,
 } from '../../../messaging'
 import { handlePluginMessage } from './handlePluginMessage'
 
@@ -16,6 +17,7 @@ export type PluginMessageCallbacks = {
   onUserContextRequest: OnUserContextRequestMessage
   onAssetSelect: OnAssetSelectMessage
   onPromptAI: OnPromptAIMessage
+  onPreviewDimension: OnPreviewDimensionMessage
   onUnknownMessage: OnUnknownPluginMessage
 }
 

packages/field-plugin/src/createFieldPlugin/createPluginActions/createPluginMessageListener/handlePluginMessage.test.ts

@@ -18,6 +18,7 @@ const mockCallbacks = (): PluginMessageCallbacks => ({
   onAssetSelect: vi.fn(),
   onUnknownMessage: vi.fn(),
   onLoaded: vi.fn(),
+  onPreviewDimension: vi.fn(),
   onPromptAI: vi.fn(),
 })
 

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

@@ -8,6 +8,7 @@ import {
 } from '../../../messaging'
 import { PluginMessageCallbacks } from './createPluginMessageListener'
 import { isStateMessage } from '../../../messaging/pluginMessage/containerToPluginMessage/StateChangedMessage'
+import { isPreviewDimensionResponse } from '../../../messaging/pluginMessage/containerToPluginMessage//PreviewDimensionResponseMessage'
 
 export const handlePluginMessage = (
   data: unknown,
@@ -38,6 +39,8 @@ export const handlePluginMessage = (
     callbacks.onAssetSelect(data)
   } else if (isPromptAIMessage(data)) {
     callbacks.onPromptAI(data)
+  } else if (isPreviewDimensionResponse(data)) {
+    callbacks.onPreviewDimension(data)
   } else {
     callbacks.onUnknownMessage(data)
   }