feat: optional modal size params

Author: demetriusfeijoo

packages/cli/templates/js/src/components.js

@@ -55,7 +55,9 @@ function ModalCloseButton() {
     },
     setup({ container, actions }) {
       container.querySelector('.btn-close').addEventListener('click', () => {
-        actions.setModalOpen(!currentData.isModalOpen)
+        actions.setModalOpen(!currentData.isModalOpen, {
+          width: '50%',
+        })
       })
     },
     update({ container, data }) {
@@ -114,7 +116,7 @@ function ModalToggle() {
       container
         .querySelector('.btn-modal-toggle')
         .addEventListener('click', () => {
-          actions.setModalOpen(!currentData.isModalOpen)
+          actions.setModalOpen(!currentData.isModalOpen, { width: '50%' })
         })
     },
     update({ container, data }) {

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

@@ -1,19 +1,17 @@
 import { FunctionComponent } from 'react'
+import type { SetModalOpen } from '@storyblok/field-plugin'
 
 const ModalToggle: FunctionComponent<{
   isModalOpen: boolean
-  setModalOpen: (
-    isModalOpen: boolean,
-    modalSize?: { width: string; height: string },
-  ) => void
+  setModalOpen: SetModalOpen<number>
 }> = ({ isModalOpen, setModalOpen }) => {
   return (
     <div>
       <h2>Modal</h2>
       <button
         className="btn w-full"
         type="button"
-        onClick={() => setModalOpen(!isModalOpen)}
+        onClick={() => setModalOpen(!isModalOpen, { width: '50%' })}
       >
         {isModalOpen ? 'Close' : 'Open'} modal
       </button>

packages/cli/templates/vue2/src/components/FieldPluginExample/ModalToggle.vue

@@ -4,7 +4,7 @@
     <button
       class="btn w-full"
       type="button"
-      @click="() => setModalOpen(!isModalOpen)"
+      @click="() => setModalOpen(!isModalOpen, { width: '50%' })"
     >
       {{ isModalOpen ? 'Close' : 'Open' }} modal
     </button>

packages/cli/templates/vue3/src/components/FieldPluginExample/ModalToggle.vue

@@ -13,7 +13,12 @@ const props = defineProps<{
     <button
       class="btn w-full"
       type="button"
-      @click="() => props.setModalOpen(!props.isModalOpen)"
+      @click="
+        () =>
+          props.setModalOpen(!props.isModalOpen, {
+            width: '50%',
+          })
+      "
     >
       {{ props.isModalOpen ? 'Close' : 'Open' }} modal
     </button>

packages/demo/src/components/ModalToggle.tsx

@@ -9,7 +9,9 @@ export const ModalToggle: PluginComponent = (props) => {
       <Button
         variant="outlined"
         color="secondary"
-        onClick={() => actions.setModalOpen(!data.isModalOpen)}
+        onClick={() =>
+          actions.setModalOpen(!data.isModalOpen, { width: '50%' })
+        }
       >
         Toggle Modal
       </Button>

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

@@ -4,8 +4,12 @@ import { FieldPluginData } from './FieldPluginData'
 export type SetContent<Content> = (
   content: Content,
 ) => Promise<FieldPluginData<Content>>
+
+export type ModalSize = { width?: string; height?: string }
+
 export type SetModalOpen<Content> = (
   isModalOpen: boolean,
+  modalSize?: ModalSize,
 ) => Promise<FieldPluginData<Content>>
 export type RequestContext = () => Promise<StoryData>
 export type SelectAsset = () => Promise<Asset>

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

@@ -9,7 +9,7 @@ export type FieldPluginData<Content> = {
   options: Record<string, string>
   spaceId: number | undefined
   userId: number | undefined
-  userPermissions: Record<string, any> | undefined
+  userPermissions: Record<string, string[] | number[]> | undefined
   isSpaceAdmin: boolean
   interfaceLang: string
   storyLang: string

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

@@ -107,10 +107,7 @@ export const createPluginActions: CreatePluginActions = ({
           )
         })
       },
-      setModalOpen: (
-        isModalOpen: boolean,
-        modalSize?: { width: string; height: string },
-      ) => {
+      setModalOpen: (isModalOpen, modalSize) => {
         return new Promise((resolve) => {
           const callbackId = pushCallback('stateChanged', (message) =>
             resolve(

packages/field-plugin/src/messaging/pluginMessage/pluginToContainerMessage/ModalChangeMessage.ts

@@ -1,10 +1,12 @@
 import { hasKey } from '../../../utils'
 import { isMessageToContainer, MessageToContainer } from './MessageToContainer'
+import type { ModalSize } from 'packages/field-plugin/src/createFieldPlugin'
 
 export type ModalChangeMessage = MessageToContainer<'toggleModal'> & {
   status: boolean
-  modalSize?: { width: string; height: string }
+  modalSize?: ModalSize
 }
+
 export const isModalChangeMessage = (obj: unknown): obj is ModalChangeMessage =>
   isMessageToContainer(obj) &&
   obj.event === 'toggleModal' &&