Merge pull request #358 from MOV-AI/dev

Release lib-react 1.3.8

.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/"
   ]
-}
+}

.eslintrc.js

@@ -1,27 +1,23 @@
 module.exports = {
-    "env": {
-        "browser": true,
-        "es2021": true
-    },
-    "extends": [
-        "eslint:recommended",
-        "plugin:react/recommended",
-        "plugin:@typescript-eslint/recommended",
-        "plugin:react-hooks/recommended"
-    ],
-    "overrides": [
-    ],
-    "parser": "@typescript-eslint/parser",
-    "parserOptions": {
-        "ecmaVersion": "latest",
-        "sourceType": "module"
-    },
-    "plugins": [
-        "react",
-        "@typescript-eslint"
-    ],
-    "rules": {
-        "react/prop-types": 0,
-        "react/display-name": 0
-    }
-}
+  env: {
+    browser: true,
+    es2021: true,
+  },
+  extends: [
+    "eslint:recommended",
+    "plugin:react/recommended",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:react-hooks/recommended",
+  ],
+  overrides: [],
+  parser: "@typescript-eslint/parser",
+  parserOptions: {
+    ecmaVersion: "latest",
+    sourceType: "module",
+  },
+  plugins: ["react", "@typescript-eslint"],
+  rules: {
+    "react/prop-types": 0,
+    "react/display-name": 0,
+  },
+};

.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"

.husky/pre-commit

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

.prettierignore

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

.prettierrc.json

@@ -1,5 +1 @@
-{
-  "trailingComma": "none",
-  "arrowParens": "avoid",
-  "tabWidth": 2
-}
+{}

.storybook/main.js

@@ -2,6 +2,6 @@ module.exports = {
   stories: ["../stories/**/*.stories.@(js|mdx)"],
   addons: ["@storybook/addon-docs", "@storybook/addon-controls"],
   core: {
-    builder: "webpack5"
-  }
-};
+    builder: "webpack5",
+  },
+};

.storybook/middleware.js

@@ -13,14 +13,14 @@ module.exports = function (app) {
         "/logout/**",
         "/static/maps/**",
         "/static/meshes/**",
-        "/static/point_clouds/**"
+        "/static/point_clouds/**",
       ],
       {
         target: "https://localhost",
         ws: true,
         logLevel: "debug",
-        secure: false
-      }
-    )
+        secure: false,
+      },
+    ),
   );
 };

.storybook/preview.js

@@ -1,6 +1,6 @@
 import withTheme from "../src/Components/HOCs/withTheme";
 import ApplicationTheme from "../src/styles/Themes";
- 
+
 export const decorators = [
   (Story) => {
     const ThemedStory = withTheme(Story, ApplicationTheme);

.storybook/webpack.config.js

@@ -13,6 +13,6 @@ module.exports = {
   module: {
     rules: [
       // add your custom rules.
-    ]
-  }
+    ],
+  },
 };

.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,9 @@
+# v1.3.8
+
+- [FP-2857](https://movai.atlassian.net/browse/FP-2857): Fleetboard - Logs refactor, merge fix for FP-2810
+- [FP-2780](https://movai.atlassian.net/browse/FP-2780): Fleetboard - Logs - clear search not working
+- [FP-2917](https://movai.atlassian.net/browse/FP-2917): Configure husky, lint-staged and prettier for lib-react
+
 # 1.3.7
 
 - [FP-2959](https://movai.atlassian.net/browse/FP-2959): Toggle button is missaligned

README.md

@@ -9,26 +9,28 @@ Its main use will be to build Mov.AI applications.
 # Table of Content
 
 <!-- TOC -->
-* [MOVAI-Lib-React](#movai-lib-react)
-* [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 -->
+
+- [MOVAI-Lib-React](#movai-lib-react)
+- [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
 
@@ -73,58 +75,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
@@ -140,9 +145,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-react"
- ```
+
+```bash
+"pnpm install @mov-ai/mov-fe-lib-react"
+```
 
 ## How to Link this library locally to an App
 
@@ -151,26 +157,33 @@ Here's how it can be done:
 
 1. In the app, identify this library in the `package.json`:
 
-    ```
-    "@mov-ai/mov-fe-lib-react": "^x.x.x-X",
-    ```
+   ```
+   "@mov-ai/mov-fe-lib-react": "^x.x.x-X",
+   ```
 
 2. Replace the library version with the path of this local library:
 
-    ```
+   ```
    "@mov-ai/mov-fe-lib-react": "file:/home/username/path/to/library/frontend-npm-lib-react"
-    ```
+   ```
 
 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.js

@@ -6,17 +6,17 @@ module.exports = {
       {
         targets: {
           chrome: "78",
-          node: "12"
-        }
-      }
+          node: "12",
+        },
+      },
     ],
     "@babel/preset-react",
-    "@babel/preset-typescript"
+    "@babel/preset-typescript",
   ],
   plugins: [
     ["@babel/plugin-proposal-class-properties", { loose: true }],
     ["@babel/plugin-transform-runtime", { loose: true }],
     ["@babel/plugin-proposal-private-methods", { loose: true }],
-    ["@babel/plugin-transform-private-property-in-object", { loose: true }]
-  ]
+    ["@babel/plugin-transform-private-property-in-object", { loose: true }],
+  ],
 };

jest.config.js

@@ -4,20 +4,15 @@ module.exports = {
   testEnvironment: "jsdom",
   setupFiles: ["<rootDir>/jest.setup.js"],
   moduleFileExtensions: ["ts", "tsx", "js", "jsx", "json", "node"],
-  testPathIgnorePatterns: [
-    '/node_modules/',
-    '/dist/'
-  ],
+  testPathIgnorePatterns: ["/node_modules/", "/dist/"],
   moduleNameMapper: {
-    "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":
+    "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|css|oga)$":
       "<rootDir>/src/__mocks__/fileMock.js",
-    "@fontsource/.+": "<rootDir>/src/__mocks__/fileMock.js"
+    "@fontsource/.+": "<rootDir>/src/__mocks__/fileMock.js",
   },
   transform: {
     "^.+\\.(ts|tsx)?$": "ts-jest",
-    "^.+\\.(js|jsx)$": "babel-jest"
+    "^.+\\.(js|jsx)$": "babel-jest",
   },
-  setupFilesAfterEnv: [
-    "@testing-library/jest-dom/extend-expect"
-  ],
+  setupFilesAfterEnv: ["@testing-library/jest-dom/extend-expect"],
 };