Merge pull request #88 from MOV-AI/FP-2920-configure-husky-lint-staged-and-prettier

FP 2920 configure husky lint staged and 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/"
   ]
-}
+}

.github/workflows/TestOnPR.yml

@@ -12,6 +12,7 @@ jobs:
     uses: MOV-AI/.github/.github/workflows/[email protected]
     with:
       deploy: "false"
+      run_lint_staged: "true"
       run_tests: "true"
       use_nvmrc: "true"
       pm: "pnpm"

.gitignore

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

.husky/pre-commit

@@ -0,0 +1 @@
+pnpm exec lint-staged

.prettierignore

@@ -0,0 +1,2 @@
+package.json
+pnpm-lock.yaml

.prettierrc.json

@@ -0,0 +1 @@
+{}

.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

.vscode/extensions.json

@@ -0,0 +1,3 @@
+{
+  "recommendations": ["esbenp.prettier-vscode"]
+}

.vscode/settings.json

@@ -0,0 +1,4 @@
+{
+  "prettier.configPath": ".prettierrc.json",
+  "editor.formatOnSave": true
+}

CHANGELOG.md

@@ -1,3 +1,7 @@
+# TBD
+
+- [FP-2920](https://movai.atlassian.net/browse/FP-2920): Configure husky, lint-staged and prettier for lib-code-editor
+
 # 1.1.4
 
 - [FP-2926](https://movai.atlassian.net/browse/FP-2926): Clear console and app errors

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,33 @@ 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
-    ```
+   ```
+
+## How to setup linting git hook
+
+1. Install husky git hook:
+   ```bash
+   "pnpm prepare"
+   ```

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
   },
 };
-