Format all files using prettier

Author: diasdm

.devcontainer/devcontainer.json

@@ -19,12 +19,10 @@
   },
   "postCreateCommand": "bash -i -c 'nvm install $(cat .nvmrc) -y && nvm use && corepack enable && pnpm clean && pnpm install'",
   "remoteUser": "node",
-  "runArgs": [
-    "--network=host"
-  ],
+  "runArgs": ["--network=host"],
   "mounts": [
     "type=bind,src=${localEnv:HOME}/.npmrc,dst=/home/node/.npmrc",
     "type=bind,src=${localEnv:HOME}/.ssh,dst=/home/node/.ssh",
     "type=bind,src=${localEnv:HOME}/movai/src/feapps,dst=/workspaces/"
   ]
-}
+}

.gitignore

@@ -52,6 +52,7 @@ typings/
 
 # Optional npm cache directory
 .npm
+.pnpm-store
 
 # Optional eslint cache
 .eslintcache

.storybook/main.js

@@ -11,7 +11,7 @@ module.exports = {
       resolve: {
         alias: {
           vscode: require.resolve(
-            "@codingame/monaco-languageclient/lib/vscode-compatibility"
+            "@codingame/monaco-languageclient/lib/vscode-compatibility",
           ),
         },
         extensions: [".js", ".json", ".ttf"],
@@ -39,5 +39,5 @@ module.exports = {
   core: {
     builder: "webpack5",
   },
-  addons: ['storybook-addon-mock/register'],
+  addons: ["storybook-addon-mock/register"],
 };

.storybook/middleware.js

@@ -20,8 +20,8 @@ module.exports = function (router) {
         ws: true,
         logLevel: "error",
         secure: false,
-      }
-    )
+      },
+    ),
   );
 
   // to test language server locally
@@ -33,7 +33,7 @@ module.exports = function (router) {
       logLevel: "error",
       secure: false,
       changeOrigin: true,
-    })
+    }),
   );
 
   // using movai-flow dev

README.md

@@ -7,26 +7,28 @@ Mov.ai's library to expose Code Editors
 # Table of Content
 
 <!-- TOC -->
-* [Mov.ai library for code editor](#movai-library-for-code-editor)
-* [Table of Content](#table-of-content)
-* [Setting Up Your Development Environment](#setting-up-your-development-environment)
-    * [Common Configuration](#common-configuration)
-      * [Configure ~/.npmrc](#configure-npmrc)
-    * [Using a DevContainer (recommended)](#using-a-devcontainer-recommended)
-    * [Using a Local Setup](#using-a-local-setup)
-      * [Tools Required](#tools-required)
-      * [Install Node with NVM](#install-node-with-nvm)
-      * [Install PNPM](#install-pnpm)
-    * [Using a DevContainer Setup](#using-a-devcontainer-setup)
-      * [Tools Required](#tools-required-1)
-* [Development](#development)
-  * [How to install this library to an app](#how-to-install-this-library-to-an-app)
-  * [How to Link this library locally to an App](#how-to-link-this-library-locally-to-an-app)
-<!-- TOC -->
+
+- [Mov.ai library for code editor](#movai-library-for-code-editor)
+- [Table of Content](#table-of-content)
+- [Setting Up Your Development Environment](#setting-up-your-development-environment)
+  - [Common Configuration](#common-configuration)
+    - [Configure ~/.npmrc](#configure-npmrc)
+  - [Using a DevContainer (recommended)](#using-a-devcontainer-recommended)
+  - [Using a Local Setup](#using-a-local-setup)
+    - [Tools Required](#tools-required)
+    - [Install Node with NVM](#install-node-with-nvm)
+    - [Install PNPM](#install-pnpm)
+  - [Using a DevContainer Setup](#using-a-devcontainer-setup)
+    - [Tools Required](#tools-required-1)
+- [Development](#development)
+  - [How to install this library to an app](#how-to-install-this-library-to-an-app)
+  - [How to Link this library locally to an App](#how-to-link-this-library-locally-to-an-app)
+  <!-- TOC -->
 
 # Setting Up Your Development Environment
 
 You can set up your development environment in two ways:
+
 - In a DevContainer (recommended)
 - Locally
 
@@ -71,58 +73,61 @@ To install Node.js using `nvm` (Node Version Manager), follow these steps:
 
    Open your terminal and run the following command to install `nvm`:
 
-    ```bash
-    curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.4/install.sh | bash
-    ```
+   ```bash
+   curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.4/install.sh | bash
+   ```
 
 2. **Load `nvm`:**
 
    After installing `nvm`, you need to load it. Close and reopen your terminal, or run:
 
-    ```bash
-    source ~/.nvm/nvm.sh
-    ```
+   ```bash
+   source ~/.nvm/nvm.sh
+   ```
 
 3. **Install the required Node.js version:**
 
    With `nvm` installed and loaded, run the following command to use the required Node.js version:
 
-    ```bash
-    nvm install && nvm use # uses the node version specify in the .nvmrc file
-    ```
+   ```bash
+   nvm install && nvm use # uses the node version specify in the .nvmrc file
+   ```
 
 4. **Set the used Node.js as the default version:**
 
-    ```bash
-    nvm current # prints the node.js version being used
-    nvm alias default xx.xx.x # sets xx.xx.x as default
-    ```
+   ```bash
+   nvm current # prints the node.js version being used
+   nvm alias default xx.xx.x # sets xx.xx.x as default
+   ```
 
 5. **Verify the installation:**
 
-    ```bash
-    node -v
-    ```
+   ```bash
+   node -v
+   ```
 
    This should output the node version specified in `.nvmrc` file.
 
-
 #### Install PNPM
 
 To install `pnpm`, follow these steps:
 
 1. Using the required pnpm version:
 
    The pnpm version required is specify in the `package.json` file as:
-    ```json
-    {
-      "packageManager": "[email protected]"
-    }
-    ```
+
+   ```json
+   {
+     "packageManager": "[email protected]"
+   }
+   ```
+
    In order to have Node.js use the specified version, run:
-    ```bash
+
+   ```bash
    corepack enable
-    ```
+   ```
+
    Upon first use, Corepack downloads the latest version from the network and uses it when running pnpm commands.
 
 ### Using a DevContainer Setup
@@ -138,9 +143,10 @@ To install `pnpm`, follow these steps:
 ## How to install this library to an app
 
 1. - Install package:
- ```bash
- "pnpm install @mov-ai/mov-fe-lib-code-editor"
- ```
+
+```bash
+"pnpm install @mov-ai/mov-fe-lib-code-editor"
+```
 
 ## How to Link this library locally to an App
 
@@ -149,26 +155,26 @@ Here's how it can be done:
 
 1. In the app, identify this library in the `package.json`:
 
-    ```
-    "@mov-ai/mov-fe-lib-code-editor": "^x.x.x-X",
-    ```
+   ```
+   "@mov-ai/mov-fe-lib-code-editor": "^x.x.x-X",
+   ```
 
 2. Replace the library version with the path of this local library:
 
-    ```
+   ```
    "@mov-ai/mov-fe-lib-code-editor": "file:/home/username/path/to/library/frontend-npm-lib-code-editor"
-    ```
+   ```
 
 3. Build this local library:
 
-    ```bash
+   ```bash
    pnpm install  # installs dependencies
    pnpm buildDev # builds the app and watches for changes
-    ```
+   ```
 
 4. Install and build the app:
 
-    ```bash
+   ```bash
    pnpm install  # installs dependencies including the local library
    pnpm start    # runs the app
-    ```
+   ```

babel.config.json

@@ -1,4 +1,4 @@
 {
   "presets": ["@babel/preset-react", "@babel/preset-env"],
   "plugins": ["@babel/plugin-transform-react-jsx"]
-}
+}

jest.config.js

@@ -3,11 +3,10 @@ module.exports = {
     "^.+\\.[tj]sx?$": "babel-jest",
   },
   transformIgnorePatterns: [
-    "node_modules/(?!(@codingame/monaco-languageclient|vscode-languageserver-textdocument)/)"
+    "node_modules/(?!(@codingame/monaco-languageclient|vscode-languageserver-textdocument)/)",
   ],
-  testEnvironment: 'jsdom',
+  testEnvironment: "jsdom",
   moduleNameMapper: {
-    '^monaco-editor$': '<rootDir>/src/__mocks__/monaco-editor.js', // Adjust as needed
+    "^monaco-editor$": "<rootDir>/src/__mocks__/monaco-editor.js", // Adjust as needed
   },
 };
-  

src/__mocks__/monaco-editor.js

@@ -1,9 +1,8 @@
 export const editor = {
-    create: jest.fn(() => ({
-      // Mocking the returned editor instance methods and properties
-      getModel: jest.fn(),
-      dispose: jest.fn(),
-      // Add more methods as needed
-    })),
-  };
-  
+  create: jest.fn(() => ({
+    // Mocking the returned editor instance methods and properties
+    getModel: jest.fn(),
+    dispose: jest.fn(),
+    // Add more methods as needed
+  })),
+};

src/components/MonacoCodeEditor/MonacoCodeEditor.js

@@ -129,7 +129,7 @@ const MonacoCodeEditor = React.forwardRef((props, ref) => {
     if (saveAction) {
       const menuItems = MenuRegistry._menuItems;
       const contextMenuEntry = [...menuItems].find(
-        (entry) => entry[0]._debugName == "EditorContext"
+        (entry) => entry[0]._debugName == "EditorContext",
       );
       const contextMenuLinks = contextMenuEntry[1];
       removeAction(contextMenuLinks, saveAction.id);

src/components/MonacoCodeEditor/hooks/useMonacoEditor.test.js

@@ -1,22 +1,21 @@
+import * as monaco from "monaco-editor";
+import { renderHook } from "@testing-library/react-hooks";
+import useMonacoEditor from "./useMonacoEditor";
 
-import * as monaco from 'monaco-editor';
-import { renderHook } from '@testing-library/react-hooks';
-import useMonacoEditor from './useMonacoEditor';
-
-describe('useMonacoEditor', () => {
+describe("useMonacoEditor", () => {
   beforeEach(() => {
     jest.clearAllMocks();
   });
 
-  it('should create editor with given props', () => {
+  it("should create editor with given props", () => {
     const { result } = renderHook(() => useMonacoEditor());
     const props = {
-      element: document.createElement('div'),
+      element: document.createElement("div"),
       value: 'console.log("Hello, world!");',
-      language: 'javascript',
-      theme: 'vs-dark',
+      language: "javascript",
+      theme: "vs-dark",
       options: {},
-      disableMinimap: false
+      disableMinimap: false,
     };
 
     result.current.createEditor(props);
@@ -25,28 +24,28 @@ describe('useMonacoEditor', () => {
       value: props.value,
       language: props.language,
       theme: props.theme,
-      'semanticHighlighting.enabled': true,
+      "semanticHighlighting.enabled": true,
       selectOnLineNumbers: true,
-      autoIndent: 'full',
-      lineNumbers: 'on',
+      autoIndent: "full",
+      lineNumbers: "on",
       overviewRulerBorder: true,
       overviewRulerLanes: 3,
       minimap: {
-        enabled: true
+        enabled: true,
       },
-      ...props.options
+      ...props.options,
     });
   });
 
-  it('should disable minimap and overview ruler when disableMinimap is true', () => {
+  it("should disable minimap and overview ruler when disableMinimap is true", () => {
     const { result } = renderHook(() => useMonacoEditor());
     const props = {
-      element: document.createElement('div'),
+      element: document.createElement("div"),
       value: 'console.log("Hello, world!");',
-      language: 'javascript',
-      theme: 'vs-dark',
+      language: "javascript",
+      theme: "vs-dark",
       options: {},
-      disableMinimap: true
+      disableMinimap: true,
     };
 
     result.current.createEditor(props);
@@ -55,16 +54,16 @@ describe('useMonacoEditor', () => {
       value: props.value,
       language: props.language,
       theme: props.theme,
-      'semanticHighlighting.enabled': true,
+      "semanticHighlighting.enabled": true,
       selectOnLineNumbers: true,
-      autoIndent: 'full',
-      lineNumbers: 'off',
+      autoIndent: "full",
+      lineNumbers: "off",
       overviewRulerBorder: false,
       overviewRulerLanes: 0,
       minimap: {
-        enabled: false
+        enabled: false,
       },
-      ...props.options
+      ...props.options,
     });
   });
 });