Merge pull request #11 from avidit/feature/lint

Add eslint

.eslintrc

@@ -0,0 +1,37 @@
+{
+  "env": {
+    "browser": true,
+    "es2021": true,
+    "node": true,
+    "jest": true
+  },
+  "extends": [
+    "eslint:recommended",
+    "plugin:react/recommended"
+  ],
+  "parserOptions": {
+    "ecmaFeatures": {
+      "jsx": true
+    },
+    "ecmaVersion": "latest",
+    "sourceType": "module"
+  },
+  "plugins": ["react"],
+  "settings": {
+    "react": {
+      "version": "detect"
+    }
+  },
+  "rules": {
+    "indent": ["error", 2],
+    "quotes": ["error", "single"],
+    "semi": ["error", "always"]
+  },
+  "globals": {
+    "page": true,
+    "browser": true,
+    "chrome": true,
+    "context": true,
+    "jestPuppeteer": true
+  }
+}

.gitignore

@@ -1,14 +1,21 @@
-# .gitignore
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 
-# Ignore node_modules folder
-node_modules/
+# dependencies
+node_modules
 
-# Ignore environment variables and secrets
+# dotenv files
 .env
 
-# Ignore build folder
-/dist
-/build
+# build
+dist
+build
 
-# Ignore logs
-*.log
+# logs
+logs
+*.log
+
+# test
+coverage
+test-results
+playwright-report
+playwright/.cache

README.md

@@ -1,98 +1,120 @@
-# Dynamo Home Page
-A react-based app to serve for Dynamo landing page. 
+# DynamoHome
 
-## Layout
-The sidebar contains links to the 3 main modules of the Home Page:
-- Recent - points to the last 'n' number of files (the number of recent files can be changed by the user in Dynamo preferences window)
-- Samples - this is the location of the Sample files. Currently, this is empty under Dynamo Sandbox
-- Learning - a one-stop-shop for Dynamo learning resources
+[![License](https://img.shields.io/npm/l/@dynamods/dynamo-home)](https://github.com/DynamoDS/DynamoHome/blob/master/LICENSE)
+[![version](https://img.shields.io/npm/v/@dynamods/dynamo-home?logo=npm&label=version)](https://www.npmjs.com/package/@dynamods/dynamo-home)
+[![Build](https://github.com/DynamoDS/DynamoHome/actions/workflows/build.yml/badge.svg)](https://github.com/DynamoDS/DynamoHome/actions/workflows/build.yml)
+[![Publish](https://github.com/DynamoDS/DynamoHome/actions/workflows/npm-publish.yml/badge.svg)](https://github.com/DynamoDS/DynamoHome/actions/workflows/npm-publish.yml)
 
-### Recent module
-![image](https://github.com/dnenov/DynamoHomePage/assets/5354594/d47687b6-dd91-46eb-a9a3-f97eb44a7ddb)
-### Samples module
-![image](https://github.com/dnenov/DynamoHomePage/assets/5354594/21279b42-3a55-4f22-8872-e084035598ba)
-### Learning module
-![image](https://github.com/dnenov/DynamoHomePage/assets/5354594/c4cc53c7-8d3d-4d16-bd82-19530169c313)
+A react-based app to serve as Dynamo landing page.
+This application is specific to Dynamo and utilizes several specific endpoints to work as intended.
 
-Dynamo HomePage WebApp which is used inside Dynamo. This application is specific to Dynamo and utilizes several specific endpoints to work as intended. 
+## Introduction
 
----
+### Layout
 
-## Requirements
+The sidebar contains links to the 3 main modules:
 
-For development, you will only need Node.js and a node global package, installed in your environment.
+- `Recent` - lists of recently opened files (the number of recent files can be changed by the user in Dynamo preferences window)
+- `Samples` - lists Sample files. e.g "%ProgramData%\Autodesk\RVT 2025\Samples"
+- `Learning` - a one-stop-shop for Dynamo learning resources
 
-### Node
+#### Recent module
 
-- #### Node installation on Windows
+![recent](https://github.com/dnenov/DynamoHomePage/assets/5354594/d47687b6-dd91-46eb-a9a3-f97eb44a7ddb)
 
-  Just go on [official Node.js website](https://nodejs.org/) and download the LTS installer. Also, be sure to have `git` available in your PATH, `npm` might need it (You can find git [here](https://git-scm.com/)).
+#### Samples module
 
-- #### Node installation on Ubuntu
+![samples](https://github.com/dnenov/DynamoHomePage/assets/5354594/21279b42-3a55-4f22-8872-e084035598ba)
 
-  You can install nodejs and npm easily with apt install, just run the following commands.
+#### Learning module
 
-      sudo apt install nodejs
-      sudo apt install npm
+![learning](https://github.com/dnenov/DynamoHomePage/assets/5354594/c4cc53c7-8d3d-4d16-bd82-19530169c313)
 
-- #### Other Operating Systems
+## Development
 
-  You can find more information about the installation on the [official Node.js website](https://nodejs.org/) and the [official NPM website](https://npmjs.org/).
+### Requirements
 
-If the installation was successful, you should be able to run the following command (version outputs are just examples).
+- [git](https://git-scm.com/)
+- [Node.js](https://nodejs.org/)
 
-    $ node --version
-    v20.10.0
+### Install
 
-    $ npm --version
-    10.2.3
+```shell
+git clone https://github.com/DynamoDS/DynamoHome.git
+cd DynamoHome
+npm install --force
+```
 
-If you need to update `npm`, you can make it using `npm`!
+### Running the project
 
-    npm install npm -g
+```shell
+npm start
+```
 
----
+### Build for development
 
-## Install
+```shell
+npm run build
+```
 
-    git https://github.com/DynamoDS/DynamoHomePage (tbc)
-    cd DynamoHomePage
-    npm install --force
+### Create a distribution bundle
 
-## Running the project
-The project has sufficient assets to cover the base-case implementation during development. 
+```shell
+npm run bundle
+```
 
-    npm start
+### Lint
+
+We use [ESlint](https://eslint.org/) to analyze and find problems. It has [integrations](https://eslint.org/docs/latest/user-guide/integrations) for various editors and other tools.
+
+```shell
+npm run lint:check  # To find problems
+npm run lint:fix    # To fix problems
+```
 
-## Simple build for development
+### Test
 
-    npm run build
+We use [jest](https://jestjs.io/) and [playwright](https://playwright.dev/) to run our tests.
 
-## Simple build for production
+```shell
+npm run test:unit   # To run unit test
+npm run test:e2e    # To run e2e test
+npm run test        # To runs all tests
+```
 
-    npm run build/bundle
+### Bump Version
 
-## Localization
-Localization is done via `react-intl` library. The current setup relies on the combination of these 2 elements:
-- localization files stored inside the `\src\locales\` folder (add as many localization files as needed)
-- adding new locales to the switch statement inside the `localization.js` file:
+```shell
+npm run version:patch   # To bump patch version
 ```
+
+### Localization
+
+Localization is done via [`react-intl`](https://www.npmjs.com/package/react-intl) library. The current setup relies on the combination of these 2 elements:
+
+- localization files stored inside the [`src/locales`](src/locales) folder (add as many localization files as needed)
+- adding new locales to the switch statement inside the [`src/localization/localization.js`](src/localization/localization.js) file:
+
+```javascript
 export const getMessagesForLocale = (locale) => {
   switch(locale) {
     case 'en':
       return englishMessages;
     default:
       return englishMessages;
   }
-}; 
+}
 ```
 
-## 3rd party libraries and dependencies 
-The use of 3rd party libraries was kept to the bare minimum, where developing native elements would have resulted in exceptional time overhead.
+### 3rd party libraries and dependencies
 
-- react-intl - library used for localization https://www.npmjs.com/package/react-intl
-- react-split-pane - allows resizable (draggable) panel (used in the SidePanel) https://www.npmjs.com/package/react-split-pane
-- react-table - a lightweight headless react table https://www.npmjs.com/package/react-table
+The use of 3rd party libraries was kept to the bare minimum, where developing native elements would have resulted in exceptional time overhead.
 
+- [`react-intl`](https://www.npmjs.com/package/react-intl) - library used for localization
+- [`react-split-pane`](https://www.npmjs.com/package/react-split-pane) - allows resizable (draggable) panel (used in the SidePanel)
+- [`react-table`](https://www.npmjs.com/package/react-table) - a lightweight headless react table
 
+### Generate Third Party License Info
 
+- To generate about box html files use `npm run license`, this will output alternative about box files to [license_output](license_output). One will contain the full transitive production dep list, the other will contain the direct production deps.
+- These files will be packed into the released npm package

jest.config.js

@@ -4,16 +4,15 @@
  */
 
 module.exports = {
-    moduleNameMapper: {
-      '\\.(jpg|jpeg|png|gif)$': '<rootDir>/tests/__mocks__/fileMock.js',
-      '\\.(css|less)$': '<rootDir>/tests/__mocks__/styleMock.js',
-      '\\.(css|less)$': '<rootDir>/tests/__mocks__/chromeMock.js',
-    },
-    testEnvironment: 'jsdom',
-    collectCoverage: true,
-    collectCoverageFrom: ['<rootDir>/src/**/*.{js,jsx}'],
-    coverageDirectory: '<rootDir>/coverage',
-    coverageReporters: ['text', 'lcov'],
-    setupFilesAfterEnv: ['<rootDir>/tests/jest.setup.js'],
-  };
-
+  moduleNameMapper: {
+    '\\.(jpg|jpeg|png|gif)$': '<rootDir>/tests/__mocks__/fileMock.js',
+    '\\.(css|less)$': '<rootDir>/tests/__mocks__/styleMock.js',
+    '\\.(css|less)$': '<rootDir>/tests/__mocks__/chromeMock.js',
+  },
+  testEnvironment: 'jsdom',
+  collectCoverage: true,
+  collectCoverageFrom: ['<rootDir>/src/**/*.{js,jsx}'],
+  coverageDirectory: '<rootDir>/coverage',
+  coverageReporters: ['text', 'lcov'],
+  setupFilesAfterEnv: ['<rootDir>/tests/jest.setup.js'],
+};