refactor: frame > board

apps/create-palette-plugin/src/plugin.ts

@@ -20,23 +20,23 @@ function createPalette() {
   const width = cols * 200 + Math.max(0, cols - 1) * 10 + 20;
   const height = rows * 100 + Math.max(0, rows - 1) * 10 + 20;
 
-  const frame = penpot.createBoard();
-  frame.name = 'Palette';
+  const board = penpot.createBoard();
+  board.name = 'Palette';
 
   const viewport = penpot.viewport;
-  frame.x = viewport.center.x - width / 2;
-  frame.y = viewport.center.y - height / 2;
+  board.x = viewport.center.x - width / 2;
+  board.y = viewport.center.y - height / 2;
 
   if (colors.length === 0) {
     // NO colors return
     return;
   }
 
-  frame.resize(width, height);
-  frame.borderRadius = 8;
+  board.resize(width, height);
+  board.borderRadius = 8;
 
   // create grid
-  const grid = frame.addGridLayout();
+  const grid = board.addGridLayout();
 
   for (let i = 0; i < rows; i++) {
     grid.addRow('flex', 1);

apps/e2e/src/plugins.spec.ts

@@ -1,15 +1,15 @@
-import { Agent } from './utils/agent';
-import testingPlugin from './plugins/create-frame-text-rect';
+import componentLibrary from './plugins/component-library';
+import testingPlugin from './plugins/create-board-text-rect';
 import flex from './plugins/create-flexlayout';
 import grid from './plugins/create-gridlayout';
+import createText from './plugins/create-text';
 import group from './plugins/group';
 import insertSvg from './plugins/insert-svg';
 import pluginData from './plugins/plugin-data';
-import componentLibrary from './plugins/component-library';
-import createText from './plugins/create-text';
+import { Agent } from './utils/agent';
 
 describe('Plugins', () => {
-  it('create frame - text - rectable', async () => {
+  it('create board - text - rectable', async () => {
     const agent = await Agent();
     const result = await agent.runCode(testingPlugin.toString());
     expect(result).toMatchSnapshot();

apps/e2e/src/plugins/create-board-text-rect.ts

@@ -41,7 +41,7 @@ export default function () {
 
     board.resize(300, 300);
 
-    const text = penpot.createText('Hello from frame');
+    const text = penpot.createText('Hello from board');
 
     if (!text) {
       throw new Error('Could not create text');

apps/e2e/src/plugins/create-flexlayout.ts

@@ -1,10 +1,10 @@
 export default function () {
   function createFlexLayout(): void {
-    const frame = penpot.createBoard();
-    frame.horizontalSizing = 'auto';
-    frame.verticalSizing = 'auto';
+    const board = penpot.createBoard();
+    board.horizontalSizing = 'auto';
+    board.verticalSizing = 'auto';
 
-    const flex = frame.addFlexLayout();
+    const flex = board.addFlexLayout();
 
     flex.dir = 'column';
     flex.wrap = 'wrap';
@@ -15,8 +15,8 @@ export default function () {
     flex.horizontalSizing = 'fill';
     flex.verticalSizing = 'fill';
 
-    frame.appendChild(penpot.createRectangle());
-    frame.appendChild(penpot.createEllipse());
+    board.appendChild(penpot.createRectangle());
+    board.appendChild(penpot.createEllipse());
   }
 
   createFlexLayout();

apps/e2e/src/plugins/create-gridlayout.ts

@@ -1,8 +1,8 @@
 export default function () {
   function createGridLayout(): void {
-    const frame = penpot.createBoard();
+    const board = penpot.createBoard();
 
-    const grid = frame.addGridLayout();
+    const grid = board.addGridLayout();
 
     grid.addRow('flex', 1);
     grid.addRow('flex', 1);

apps/poc-state-plugin/src/plugin.ts

@@ -221,16 +221,16 @@ function addIcon() {
 }
 
 function createGrid() {
-  const frame = penpot.createBoard();
-  frame.name = 'Frame Grid';
+  const board = penpot.createBoard();
+  board.name = 'Board Grid';
 
   const viewport = penpot.viewport;
-  frame.x = viewport.center.x - 150;
-  frame.y = viewport.center.y - 200;
-  frame.resize(300, 400);
+  board.x = viewport.center.x - 150;
+  board.y = viewport.center.y - 200;
+  board.resize(300, 400);
 
   // create grid
-  const grid = frame.addGridLayout();
+  const grid = board.addGridLayout();
   const [numRows, numCols] = GRID;
 
   for (let i = 0; i < numRows; i++) {
@@ -263,12 +263,12 @@ function createGrid() {
 }
 
 function createColors() {
-  const frame = penpot.createBoard();
-  frame.name = 'Palette';
+  const board = penpot.createBoard();
+  board.name = 'Palette';
 
   const viewport = penpot.viewport;
-  frame.x = viewport.center.x - 150;
-  frame.y = viewport.center.y - 200;
+  board.x = viewport.center.x - 150;
+  board.y = viewport.center.y - 200;
 
   const colors = penpot.library.local.colors.sort((a, b) =>
     a.name.toLowerCase() > b.name.toLowerCase()
@@ -289,11 +289,11 @@ function createColors() {
   const width = cols * 150 + Math.max(0, cols - 1) * 10 + 20;
   const height = rows * 100 + Math.max(0, rows - 1) * 10 + 20;
 
-  frame.resize(width, height);
-  frame.borderRadius = 8;
+  board.resize(width, height);
+  board.borderRadius = 8;
 
   // create grid
-  const grid = frame.addGridLayout();
+  const grid = board.addGridLayout();
 
   for (let i = 0; i < rows; i++) {
     grid.addRow('auto');
@@ -313,7 +313,7 @@ function createColors() {
   grid.horizontalPadding = 10;
 
   // These properties are not mandatory, if not defined will apply the default values
-  frame.shadows = [
+  board.shadows = [
     {
       style: 'drop-shadow',
       offsetX: 5,

apps/table-plugin/src/plugin.ts

@@ -20,17 +20,17 @@ penpot.ui.onMessage<PluginMessageEvent>((message) => {
       numCols = message.content.new.column;
     }
 
-    const frame = penpot.createBoard();
-    frame.name = 'Table';
+    const board = penpot.createBoard();
+    board.name = 'Table';
 
     const viewport = penpot.viewport;
-    frame.x = viewport.center.x - 150;
-    frame.y = viewport.center.y - 200;
-    frame.resize(numCols * 160, numRows * 50);
-    frame.borderRadius = 8;
+    board.x = viewport.center.x - 150;
+    board.y = viewport.center.y - 200;
+    board.resize(numCols * 160, numRows * 50);
+    board.borderRadius = 8;
 
     // create grid
-    const grid = frame.addGridLayout();
+    const grid = board.addGridLayout();
 
     for (let i = 0; i < numRows; i++) {
       grid.addRow('flex', 1);

docs/test-e2e.md

@@ -26,11 +26,11 @@
    Place your test files in the `/apps/e2e/src/**/*.spec.ts` directory. Below is an example of a test file:
 
    ```ts
-   import testingPlugin from './plugins/create-frame-text-rect';
+   import testingPlugin from './plugins/create-board-text-rect';
    import { Agent } from './utils/agent';
 
    describe('Plugins', () => {
-     it('create frame - text - rectangle', async () => {
+     it('create board - text - rectangle', async () => {
        const agent = await Agent();
        const result = await agent.runCode(testingPlugin.toString());
 

libs/plugin-types/index.d.ts

@@ -3149,7 +3149,7 @@ export interface RulerGuide {
   readonly orientation: RulerGuideOrientation;
 
   /**
-   * `position` is the position in the axis in absolute positioning. If this is a frame
+   * `position` is the position in the axis in absolute positioning. If this is a board
    * guide will return the positioning relative to the board.
    */
   position: number;