💄 Fix JS files formatting issues

frontend/playwright/ui/pages/RegisterPage.js

@@ -3,7 +3,9 @@ import { BasePage } from "./BasePage";
 export class RegisterPage extends BasePage {
   constructor(page) {
     super(page);
-    this.registerButton = page.getByRole("button", { name: "Create an account" });
+    this.registerButton = page.getByRole("button", {
+      name: "Create an account",
+    });
     this.password = page.getByLabel("Password");
     this.email = page.getByLabel("Work email");
     this.fullName = page.getByLabel("Full name");

frontend/playwright/ui/pages/WorkspacePage.js

@@ -159,10 +159,7 @@ export class WorkspacePage extends BaseWebSocketPage {
       "get-profiles-for-file-comments?file-id=*",
       "workspace/get-profile-for-file-comments.json",
     );
-    await this.mockRPC(
+    await this.mockRPC(/get\-file\?/, "workspace/get-file-blank.json");
-      /get\-file\?/,
-      "workspace/get-file-blank.json"
-    );
     await this.mockRPC(
       "get-file-object-thumbnails?file-id=*",
       "workspace/get-file-object-thumbnails-blank.json",

frontend/playwright/ui/render-wasm-specs/shapes.spec.js

@@ -124,11 +124,13 @@ test("Renders shapes with exif rotated images fills and strokes", async ({
       "27270c45-35b4-80f3-8006-63a39cf292e7",
       "27270c45-35b4-80f3-8006-63a41d147866",
       "27270c45-35b4-80f3-8006-63a43dc4984b",
-      "27270c45-35b4-80f3-8006-63a3ea82557f"
+      "27270c45-35b4-80f3-8006-63a3ea82557f",
     ],
     "render-wasm/assets/landscape.jpg",
   );
-  await workspace.mockGetFile("render-wasm/get-file-shapes-exif-rotated-fills.json");
+  await workspace.mockGetFile(
+    "render-wasm/get-file-shapes-exif-rotated-fills.json",
+  );
 
   await workspace.goToWorkspace({
     id: "27270c45-35b4-80f3-8006-63a3912bdce8",
@@ -139,9 +141,7 @@ test("Renders shapes with exif rotated images fills and strokes", async ({
   await expect(workspace.canvas).toHaveScreenshot();
 });
 
-test("Updates canvas background", async ({
+test("Updates canvas background", async ({ page }) => {
-  page,
-}) => {
   const workspace = new WasmWorkspacePage(page);
   await workspace.setupEmptyFile();
   await workspace.mockGetFile("render-wasm/get-file-text.json");
@@ -152,7 +152,9 @@ test("Updates canvas background", async ({
   });
   await workspace.waitForFirstRender({ hideUI: false });
 
-  const canvasBackgroundInput = workspace.page.getByRole("textbox", { name: 'Color' });
+  const canvasBackgroundInput = workspace.page.getByRole("textbox", {
+    name: "Color",
+  });
   await canvasBackgroundInput.fill("FABADA");
   await workspace.page.keyboard.press("Enter");
 

frontend/playwright/ui/render-wasm-specs/texts.spec.js

@@ -12,37 +12,36 @@ test.beforeEach(async ({ page }) => {
 async function mockGetEmojiFont(workspace) {
   await workspace.mockGetAsset(
     /notocoloremoji.*\.ttf$/,
-    "render-wasm/assets/notocoloremojisubset.ttf"
+    "render-wasm/assets/notocoloremojisubset.ttf",
   );
 }
 
 async function mockGetJapaneseFont(workspace) {
   await workspace.mockGetAsset(
     /notosansjp.*\.ttf$/,
-    "render-wasm/assets/notosansjpsubset.ttf"
+    "render-wasm/assets/notosansjpsubset.ttf",
   );
   await workspace.mockGetAsset(
     /notosanssc.*\.ttf$/,
-    "render-wasm/assets/notosansjpsubset.ttf"
+    "render-wasm/assets/notosansjpsubset.ttf",
   );
 }
 
 async function mockGetSymbolsFont(workspace) {
   await workspace.mockGetAsset(
     /notosanssymbols.*\.ttf$/,
-    "render-wasm/assets/notosanssymbolssubset.ttf"
+    "render-wasm/assets/notosanssymbolssubset.ttf",
   );
   await workspace.mockGetAsset(
     /notosanssymbols2.*\.ttf$/,
-    "render-wasm/assets/notosanssymbols2subset.ttf"
+    "render-wasm/assets/notosanssymbols2subset.ttf",
   );
   await workspace.mockGetAsset(
     /notomusic.*\.ttf$/,
-    "render-wasm/assets/notomusicsubset.ttf"
+    "render-wasm/assets/notomusicsubset.ttf",
   );
 }
 
-
 test("Renders a file with texts", async ({ page }) => {
   const workspace = new WasmWorkspacePage(page);
   await workspace.setupEmptyFile();
@@ -139,7 +138,7 @@ test("Renders a file with texts with images", async ({ page }) => {
   await workspace.mockFileMediaAsset(
     [
       "4f89252d-ebbc-813e-8006-8699e4170e17",
-      "4f89252d-ebbc-813e-8006-8699e4170e18"
+      "4f89252d-ebbc-813e-8006-8699e4170e18",
     ],
     "render-wasm/assets/pattern.png",
   );
@@ -156,7 +155,9 @@ test("Renders a file with texts with images", async ({ page }) => {
   await expect(workspace.canvas).toHaveScreenshot();
 });
 
-test("Renders a file with texts with emoji and different symbols", async ({ page }) => {
+test("Renders a file with texts with emoji and different symbols", async ({
+  page,
+}) => {
   const workspace = new WasmWorkspacePage(page);
   await workspace.setupEmptyFile();
   await mockGetEmojiFont(workspace);
@@ -176,9 +177,7 @@ test("Renders a file with text decoration", async ({ page }) => {
   const workspace = new WasmWorkspacePage(page);
   await workspace.setupEmptyFile();
   await workspace.mockFileMediaAsset(
-    [
+    ["d6c33e7b-7b64-80f3-8006-78509a3a2d21"],
-      "d6c33e7b-7b64-80f3-8006-78509a3a2d21",
-    ],
     "render-wasm/assets/pattern.png",
   );
   await mockGetEmojiFont(workspace);
@@ -199,7 +198,9 @@ test("Renders a file with emoji and text decoration", async ({ page }) => {
   await workspace.setupEmptyFile();
   await mockGetEmojiFont(workspace);
 
-  await workspace.mockGetFile("render-wasm/get-file-emoji-and-text-decoration.json");
+  await workspace.mockGetFile(
+    "render-wasm/get-file-emoji-and-text-decoration.json",
+  );
 
   await workspace.goToWorkspace({
     id: "82d128e1-d3b1-80a5-8006-ae60fedcd5e7",
@@ -226,7 +227,9 @@ test("Renders a file with multiple emoji", async ({ page }) => {
   await expect(workspace.canvas).toHaveScreenshot();
 });
 
-test("Renders a file with texts with different alignments", async ({ page }) => {
+test("Renders a file with texts with different alignments", async ({
+  page,
+}) => {
   const workspace = new WasmWorkspacePage(page);
   await workspace.setupEmptyFile();
   await workspace.mockGetFile("render-wasm/get-file-text-align.json");
@@ -251,12 +254,16 @@ test("Updates text alignment edition - part 1", async ({ page }) => {
   await workspace.waitForFirstRender({ hideUI: false });
   await workspace.clickLeafLayer("Text 1");
 
-  const textOptionsButton = workspace.page.getByTestId("text-align-options-button");
+  const textOptionsButton = workspace.page.getByTestId(
+    "text-align-options-button",
+  );
   const autoWidthButton = workspace.page.getByTitle("Auto width");
   const autoHeightButton = workspace.page.getByTitle("Auto height");
   const alignMiddleButton = workspace.page.getByTitle("Align middle");
   const alignBottomButton = workspace.page.getByTitle("Align bottom");
-  const alignRightButton = workspace.page.getByTitle("Align right (Ctrl+Alt+R)");
+  const alignRightButton = workspace.page.getByTitle(
+    "Align right (Ctrl+Alt+R)",
+  );
 
   await textOptionsButton.click();
 
@@ -276,7 +283,7 @@ test("Updates text alignment edition - part 1", async ({ page }) => {
   await workspace.page.keyboard.press("Escape");
   await workspace.hideUI();
 
-  await expect(workspace.canvas).toHaveScreenshot({timeout: 10000});
+  await expect(workspace.canvas).toHaveScreenshot({ timeout: 10000 });
 });
 
 test("Updates text alignment edition - part 2", async ({ page }) => {
@@ -291,11 +298,15 @@ test("Updates text alignment edition - part 2", async ({ page }) => {
   await workspace.waitForFirstRender({ hideUI: false });
   await workspace.clickLeafLayer("Text 1");
 
-  const textOptionsButton = workspace.page.getByTestId("text-align-options-button");
+  const textOptionsButton = workspace.page.getByTestId(
+    "text-align-options-button",
+  );
   const alignTopButton = workspace.page.getByTitle("Align top");
   const alignMiddleButton = workspace.page.getByTitle("Align middle");
   const alignBottomButton = workspace.page.getByTitle("Align bottom");
-  const alignCenterButton = workspace.page.getByTitle("Align center (Ctrl+Alt+T)");
+  const alignCenterButton = workspace.page.getByTitle(
+    "Align center (Ctrl+Alt+T)",
+  );
   const alignJustifyButton = workspace.page.getByTitle("Justify (Ctrl+Alt+J)");
   const LTRButton = workspace.page.getByTitle("LTR");
   const RTLButton = workspace.page.getByTitle("RTL");
@@ -324,7 +335,7 @@ test("Updates text alignment edition - part 2", async ({ page }) => {
   await workspace.page.keyboard.press("Escape");
   await workspace.hideUI();
 
-  await expect(workspace.canvas).toHaveScreenshot({timeout: 10000});
+  await expect(workspace.canvas).toHaveScreenshot({ timeout: 10000 });
 });
 
 test("Updates text alignment edition - part 3", async ({ page }) => {
@@ -339,13 +350,17 @@ test("Updates text alignment edition - part 3", async ({ page }) => {
   await workspace.waitForFirstRender({ hideUI: false });
   await workspace.clickLeafLayer("Text 1");
 
-  const textOptionsButton = workspace.page.getByTestId("text-align-options-button");
+  const textOptionsButton = workspace.page.getByTestId(
+    "text-align-options-button",
+  );
   const autoWidthButton = workspace.page.getByTitle("Auto width");
   const autoHeightButton = workspace.page.getByTitle("Auto height");
   const alignMiddleButton = workspace.page.getByTitle("Align middle");
   const alignBottomButton = workspace.page.getByTitle("Align bottom");
   const alignLeftButton = workspace.page.getByTitle("Align left (Ctrl+Alt+L)");
-  const alignCenterButton = workspace.page.getByTitle("Align center (Ctrl+Alt+T)");
+  const alignCenterButton = workspace.page.getByTitle(
+    "Align center (Ctrl+Alt+T)",
+  );
   const alignJustifyButton = workspace.page.getByTitle("Justify (Ctrl+Alt+J)");
   const RTLButton = workspace.page.getByTitle("RTL");
 
@@ -375,5 +390,5 @@ test("Updates text alignment edition - part 3", async ({ page }) => {
   await workspace.page.keyboard.press("Escape");
   await workspace.hideUI();
 
-  await expect(workspace.canvas).toHaveScreenshot({timeout: 10000});
+  await expect(workspace.canvas).toHaveScreenshot({ timeout: 10000 });
 });

frontend/playwright/ui/specs/colorpicker.spec.js

@@ -190,7 +190,7 @@ test("Gradient stops limit", async ({ page }) => {
 
   await workspacePage.goToWorkspace({
     fileId: "c7ce0794-0992-8105-8004-38f280443849",
-    pageId: "66697432-c33d-8055-8006-2c62cc084cad"
+    pageId: "66697432-c33d-8055-8006-2c62cc084cad",
   });
 
   await workspacePage.clickLeafLayer("Rectangle");

frontend/playwright/ui/specs/register.spec.js

@@ -7,15 +7,21 @@ test.beforeEach(async ({ page }) => {
 });
 
 test.describe("Register form errors", () => {
-  test("User gets error message when email does not match invitation", async ({ page }) => {
+  test("User gets error message when email does not match invitation", async ({
+    page,
+  }) => {
     const registerPage = new RegisterPage(page);
     await registerPage.setupMismatchedEmailError();
 
-    await registerPage.fillRegisterFormInputs("John Doe", "john.doe@example.com", "password123");
+    await registerPage.fillRegisterFormInputs(
+      "John Doe",
+      "john.doe@example.com",
+      "password123",
+    );
     await registerPage.clickRegisterButton();
 
-    await expect(page.getByText(
+    await expect(
-      "Email does not match the invitation.",
+      page.getByText("Email does not match the invitation."),
-    )).toBeVisible();
+    ).toBeVisible();
   });
 });

frontend/playwright/ui/specs/tokens.spec.js

@@ -119,7 +119,6 @@ test.describe("Tokens: Tokens Tab", () => {
       .click();
 
     // Create color token with mouse
-
     await expect(tokensUpdateCreateModal).toBeVisible();
 
     const nameField = tokensUpdateCreateModal.getByLabel("Name");

frontend/scripts/_helpers.js

@@ -255,9 +255,9 @@ const markedOptions = {
         const text = token.text;
         return `<a href="${href}" target="${target}">${text}</a>`;
       }
-    }
+    },
-  }
+  },
-}
+};
 
 marked.use(markedOptions);
 

frontend/scripts/watch-storybook.js

@@ -79,15 +79,11 @@ h.watch("translations", null, async function (path) {
 });
 
 log.info("watch: assets (~)");
-h.watch(
+h.watch(["resources/images", "resources/fonts"], null, async function (path) {
-  ["resources/images", "resources/fonts"],
+  log.info("changed:", path);
-  null,
+  await h.compileSvgSprites();
-  async function (path) {
+  await h.copyAssets();
-    log.info("changed:", path);
+  await h.compileTemplates();
-    await h.compileSvgSprites();
+});
-    await h.copyAssets();
-    await h.compileTemplates();
-  },
-);
 
 worker.terminate();

frontend/scripts/watch.js

@@ -78,16 +78,12 @@ h.watch("translations", null, async function (path) {
 });
 
 log.info("watch: assets (~)");
-h.watch(
+h.watch(["resources/images", "resources/fonts"], null, async function (path) {
-  ["resources/images", "resources/fonts"],
+  log.info("changed:", path);
-  null,
+  await h.compileSvgSprites();
-  async function (path) {
+  await h.copyAssets();
-    log.info("changed:", path);
+  await h.compileTemplates();
-    await h.compileSvgSprites();
+});
-    await h.copyAssets();
-    await h.compileTemplates();
-  },
-);
 
 log.info("watch: wasm playground (~)");
 h.watch(["resources/wasm-playground"], null, async function (path) {

frontend/src/app/main/ui/ds/controls/numeric_input.stories.jsx

@@ -44,7 +44,7 @@ export default {
     property: "search",
   },
   parameters: {
-    controls: { exclude: [ "tokens" ] },
+    controls: { exclude: ["tokens"] },
   },
   render: ({ ...args }) => <NumericInput {...args} />,
 };

frontend/src/app/main/ui/ds/product/avatar.stories.jsx

@@ -27,17 +27,17 @@ export default {
     variant: "S",
     selected: false,
   },
-  render: ({name, url, ...args }) => {
+  render: ({ name, url, ...args }) => {
     const profile = {
       id: "00000000-0000-0000-0000-000000000000",
-      fullname: name
+      fullname: name,
     };
     if (url) {
       profile.photoUrl = url;
-    };
+    }
 
     return <Avatar profile={profile} {...args} />;
-  }
+  },
 };
 
 export const Default = {};

frontend/src/app/main/ui/ds/product/milestone.stories.jsx

@@ -38,10 +38,16 @@ export default {
     active: false,
     editing: false,
   },
-  render: ({ profileName, profileAvatar, profileColor, createdAt, ...args }) => {
+  render: ({
+    profileName,
+    profileAvatar,
+    profileColor,
+    createdAt,
+    ...args
+  }) => {
     const profile = {
       id: "00000000-0000-0000-0000-000000000000",
-      fullname: profileName
+      fullname: profileName,
     };
 
     if (profileAvatar) {

frontend/src/app/main/ui/ds/product/milestone_group.stories.jsx

@@ -27,7 +27,7 @@ export default {
   args: {
     label: "Milestone 1",
     active: false,
-    snapshots: [1737452413841, 1737452422063, 1737452431603]
+    snapshots: [1737452413841, 1737452422063, 1737452431603],
   },
   render: ({ ...args }) => {
     return <MilestoneGroup {...args} />;