Merge branch 'main' of github.com:storyblok/field-plugin into feat/SHAPE-8085-field-plugin-sdk-ai-prompt-new-action

# Conflicts:
#	packages/field-plugin/src/createFieldPlugin/FieldPluginActions.ts
#	packages/field-plugin/src/createFieldPlugin/createPluginActions/createPluginActions.test.ts
#	packages/field-plugin/src/createFieldPlugin/createPluginActions/createPluginActions.ts
#	packages/field-plugin/src/createFieldPlugin/createPluginActions/createPluginMessageListener/handlePluginMessage.ts
#	packages/field-plugin/src/messaging/pluginMessage/containerToPluginMessage/index.ts
#	packages/lib-helpers/test/src/index.ts
#	packages/sandbox/src/dom/createSandboxMessageListener.ts

Author: demetriusfeijoo

packages/cli/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storyblok/field-plugin-cli",
-  "version": "1.5.1",
+  "version": "1.5.2",
   "license": "MIT",
   "type": "module",
   "bin": {

packages/cli/templates/js/package.json

@@ -10,7 +10,7 @@
     "deploy": "npm run build && npx @storyblok/field-plugin-cli@latest deploy"
   },
   "dependencies": {
-    "@storyblok/field-plugin": "1.4.2"
+    "@storyblok/field-plugin": "1.5.0"
   },
   "devDependencies": {
     "vite": "5.4.11",

packages/cli/templates/react/package.json

@@ -12,7 +12,7 @@
     "deploy": "npm run build && npx @storyblok/field-plugin-cli@latest deploy"
   },
   "dependencies": {
-    "@storyblok/field-plugin": "1.4.2",
+    "@storyblok/field-plugin": "1.5.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1"
   },

packages/cli/templates/react/src/components/FieldPluginExample/ModalToggle.tsx

@@ -1,8 +1,9 @@
 import { FunctionComponent } from 'react'
+import type { SetModalOpen } from '@storyblok/field-plugin'
 
 const ModalToggle: FunctionComponent<{
   isModalOpen: boolean
-  setModalOpen: (isModalOpen: boolean) => void
+  setModalOpen: SetModalOpen<number>
 }> = ({ isModalOpen, setModalOpen }) => {
   return (
     <div>

packages/cli/templates/vue2/package.json

@@ -12,7 +12,7 @@
     "deploy": "npm run build && npx @storyblok/field-plugin-cli@latest deploy"
   },
   "dependencies": {
-    "@storyblok/field-plugin": "1.4.2",
+    "@storyblok/field-plugin": "1.5.0",
     "vue": "^2.7.14"
   },
   "devDependencies": {

packages/cli/templates/vue3/package.json

@@ -11,7 +11,7 @@
     "deploy": "npm run build && npx @storyblok/field-plugin-cli@latest deploy"
   },
   "dependencies": {
-    "@storyblok/field-plugin": "1.4.2",
+    "@storyblok/field-plugin": "1.5.0",
     "vue": "^3.2.47"
   },
   "devDependencies": {

packages/demo/src/components/ContextRequester.tsx

@@ -5,8 +5,14 @@ export const ContextRequester: PluginComponent = (props) => {
   const { data, actions } = props
   return (
     <Stack gap={2}>
-      <Typography variant="subtitle1">Story</Typography>
-      <Typography textAlign="center">{JSON.stringify(data.story)}</Typography>
+      <Typography variant="subtitle1">Story: </Typography>
+      <Typography textAlign="center">
+        {JSON.stringify(data.story, null, 2)}
+      </Typography>
+      <Typography variant="subtitle1">Is AI enabled: </Typography>
+      <Typography textAlign="center">
+        {data.isAIEnabled ? 'Yes' : 'No'}
+      </Typography>
       <Button
         variant="outlined"
         color="secondary"

packages/demo/src/components/ModalToggle.tsx

@@ -1,15 +1,53 @@
-import { Button, Stack, Typography } from '@mui/material'
+import { useState } from 'react'
+import { Button, Stack, Typography, TextField, Grid } from '@mui/material'
 import { PluginComponent } from './FieldPluginDemo'
+import type { 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
+        >
+          <TextField
+            label="Set modal width:"
+            value={modalSize.width}
+            fullWidth
+            onChange={(e) =>
+              setModalSize({ ...modalSize, width: e.target.value })
+            }
+          />
+        </Grid>
+        <Grid
+          xs={6}
+          item
+        >
+          <TextField
+            label="Set modal height:"
+            value={modalSize.height}
+            fullWidth
+            onChange={(e) =>
+              setModalSize({ ...modalSize, height: e.target.value })
+            }
+          />
+        </Grid>
+      </Grid>
       <Button
         variant="outlined"
         color="secondary"
-        onClick={() => actions.setModalOpen(!data.isModalOpen)}
+        onClick={() => actions.setModalOpen(!data.isModalOpen, modalSize)}
       >
         Toggle Modal
       </Button>

packages/demo/src/components/NonModalView.tsx

@@ -4,6 +4,7 @@ import { ValueMutator } from './ValueMutator'
 import { HeightChangeDemo } from './HeightChangeDemo'
 import { AssetSelector } from './AssetSelector'
 import { ContextRequester } from './ContextRequester'
+import { UserContextRequester } from './UserContextRequester'
 import { PluginComponent } from './FieldPluginDemo'
 import { LanguageView } from './LanguageView'
 import { PromptAI } from './PromptAI'
@@ -13,9 +14,9 @@ export const NonModalView: PluginComponent = (props) => (
     <Stack gap={6}>
       <ModalToggle {...props} />
       <ValueMutator {...props} />
-      <ModalToggle {...props} />
       <AssetSelector {...props} />
       <ContextRequester {...props} />
+      <UserContextRequester {...props} />
       <HeightChangeDemo {...props} />
       <LanguageView {...props} />
       <PromptAI {...props} />

packages/demo/src/components/UserContextRequester.tsx

@@ -0,0 +1,32 @@
+import { useState } from 'react'
+import { Button, Stack, Typography } from '@mui/material'
+import { PluginComponent } from './FieldPluginDemo'
+import { UserData } from '@storyblok/field-plugin'
+
+export const UserContextRequester: PluginComponent = (props) => {
+  const { actions } = props
+  const [user, setUser] = useState<UserData>({
+    isSpaceAdmin: false,
+    permissions: undefined,
+  })
+  return (
+    <Stack gap={2}>
+      <Typography variant="subtitle1">User data: </Typography>
+      <Typography>Permissions: </Typography>
+      <Typography textAlign="center">
+        {JSON.stringify(user.permissions, null, 2)}
+      </Typography>
+      <Typography>Is space admin? </Typography>
+      <Typography textAlign="center">
+        {user.isSpaceAdmin ? 'Yes' : 'No'}
+      </Typography>
+      <Button
+        variant="outlined"
+        color="secondary"
+        onClick={async () => setUser(await actions.requestUserContext())}
+      >
+        Request User Context
+      </Button>
+    </Stack>
+  )
+}