feat: max size modal

libs/plugins-runtime/src/lib/create-modal.spec.ts

@@ -0,0 +1,98 @@
+import { describe, it, expect, vi } from 'vitest';
+import { createModal } from './create-modal.js';
+import type { PenpotTheme } from '@penpot/plugin-types';
+import type { OpenUIOptions } from './models/open-ui-options.model';
+import type { PluginModalElement } from './modal/plugin-modal';
+
+describe('createModal', () => {
+  const modalMock = {
+    setTheme: vi.fn(),
+    style: {
+      setProperty: vi.fn(),
+    },
+    setAttribute: vi.fn(),
+  } as unknown as PluginModalElement;
+
+  const appendChildSpy = vi
+    .spyOn(document.body, 'appendChild')
+    .mockReturnValue(modalMock);
+
+  const createElementSpy = vi
+    .spyOn(document, 'createElement')
+    .mockReturnValue(modalMock);
+
+  afterEach(() => {
+    document.body.innerHTML = '';
+    vi.clearAllMocks();
+  });
+
+  it('should create and configure a modal element', () => {
+    const theme: PenpotTheme = 'light';
+    const options: OpenUIOptions = { width: 400, height: 600 };
+
+    const modal = createModal(
+      'Test Modal',
+      'https://example.com',
+      theme,
+      options
+    );
+
+    expect(createElementSpy).toHaveBeenCalledWith('plugin-modal');
+    expect(modal.setTheme).toHaveBeenCalledWith(theme);
+
+    expect(modal.style.setProperty).toHaveBeenCalledWith(
+      '--modal-block-start',
+      '40px'
+    );
+    expect(modal.style.setProperty).toHaveBeenCalledWith(
+      '--modal-inline-end',
+      '320px'
+    );
+
+    expect(modal.setAttribute).toHaveBeenCalledWith('title', 'Test Modal');
+    expect(modal.setAttribute).toHaveBeenCalledWith(
+      'iframe-src',
+      'https://example.com'
+    );
+    expect(modal.setAttribute).toHaveBeenCalledWith('width', '400');
+    expect(modal.setAttribute).toHaveBeenCalledWith('height', '600');
+
+    expect(appendChildSpy).toHaveBeenCalledWith(modal);
+  });
+
+  it('should apply default dimensions if options are not provided', () => {
+    const theme: PenpotTheme = 'light';
+
+    const modal = createModal('Test Modal', 'https://example.com', theme);
+
+    expect(modal.setAttribute).toHaveBeenCalledWith('width', '335');
+    expect(modal.setAttribute).toHaveBeenCalledWith('height', '590');
+  });
+
+  it('should limit modal dimensions to the window size', () => {
+    const theme: PenpotTheme = 'light';
+    const options: OpenUIOptions = { width: 2000, height: 2000 };
+
+    window.innerWidth = 1000;
+    window.innerHeight = 800;
+
+    const modal = createModal(
+      'Test Modal',
+      'https://example.com',
+      theme,
+      options
+    );
+
+    const expectedWidth = 680; // 1000 - 320 (initialPosition.inlineEnd)
+    const expectedHeight = 760; // 800 - 40 (initialPosition.blockStart)
+
+    expect(modal.setAttribute).toHaveBeenCalledWith(
+      'width',
+      String(expectedWidth)
+    );
+    expect(modal.setAttribute).toHaveBeenCalledWith(
+      'height',
+      String(expectedHeight)
+    );
+  });
+});

libs/plugins-runtime/src/lib/create-modal.ts

@@ -12,10 +12,32 @@ export function createModal(
 
   modal.setTheme(theme);
 
+  const defaultWidth = 335;
+  const defaultHeight = 590;
+
+  const initialPosition = {
+    blockStart: 40,
+    inlineEnd: 320,
+  };
+
+  modal.style.setProperty(
+    '--modal-block-start',
+    `${initialPosition.blockStart}px`
+  );
+  modal.style.setProperty(
+    '--modal-inline-end',
+    `${initialPosition.inlineEnd}px`
+  );
+
+  const maxWidth = window.innerWidth - initialPosition.inlineEnd;
+  const maxHeight = window.innerHeight - initialPosition.blockStart;
+  const width = Math.min(options?.width || defaultWidth, maxWidth);
+  const height = Math.min(options?.height || defaultHeight, maxHeight);
+
   modal.setAttribute('title', name);
   modal.setAttribute('iframe-src', url);
-  modal.setAttribute('width', String(options?.width || 285));
-  modal.setAttribute('height', String(options?.height || 540));
+  modal.setAttribute('width', String(width));
+  modal.setAttribute('height', String(height));
 
   document.body.appendChild(modal);
 

libs/plugins-runtime/src/lib/modal/plugin.modal.css

@@ -26,11 +26,12 @@
 }
 
 .wrapper {
+  box-sizing: border-box;
   display: flex;
   flex-direction: column;
   position: fixed;
-  inset-block-start: 40px;
-  inset-inline-end: 320px;
+  inset-block-start: var(--modal-block-start);
+  inset-inline-end: var(--modal-inline-end);
   z-index: 1000;
   padding: 25px;
   border-radius: 15px;