Improvements and Fixes

frontend/.env.sample

@@ -114,4 +114,34 @@ VITE_TRAINING_AREAS_AOI_LABELS_OUTLINE_COLOR = "#D73434"
 # The remote url to JOSM.
 # Data type: String (e.g., "http://127.0.0.1:8111/").
 # Default value: http://127.0.0.1:8111/.
-VITE_JOSM_REMOTE_URL =  "http://127.0.0.1:8111/"
+VITE_JOSM_REMOTE_URL =  "http://127.0.0.1:8111/"
+
+
+# The time to poll the backend for the status of the AOI training labels fetching, in milliseconds (ms).
+# Data type: Positive Integer (e.g., 900).
+# Default value: 5000 milliseconds (5 seconds).
+VITE_TRAINING_AREA_LABELS_FETCH_POOLING_INTERVAL_MS = 5000
+
+
+# The time to poll the backend for the status of the OSM last updated time, in milliseconds (ms).
+# Data type: Positive Integer (e.g., 900).
+# Default value: 10000 milliseconds (10 seconds).
+VITE_OSM_LAST_UPDATED_POOLING_INTERVAL_MS = 10000
+
+
+# The maximum GeoJSON file containing the training labels, a user can upload for an AOI.
+# Data type: Positive Integer (e.g., 1).
+# Default value: 1 (1 GeoJSON file).
+VITE_MAX_GEOJSON_FILE_UPLOAD_FOR_TRAINING_AREA_LABELS = 1
+
+
+# The maximum GeoJSON file containing the training area, a user can upload for an AOI.
+# Data type: Positive Integer (e.g., 1).
+# Default value: 10 (10 GeoJSON files, assumming each file has a single AOI).
+VITE_MAX_GEOJSON_FILE_UPLOAD_FOR_TRAINING_AREAS = 10
+
+
+# The maximum GeoJSON file(s) containing the training areas/AOI polygon geometry that a user can upload.
+# Data type: Positive Integer (e.g., 1).
+# Default value: 10 (10 GeoJSON files, assumming each file has a single AOI).
+VITE_MAX_ACCEPTABLE_POLYGON_IN_TRAINING_AREA_GEOJSON_FILE = 10

frontend/.prettierignore

@@ -1,3 +1,9 @@
 # Ignore artifacts:
 build
 coverage
+node_modules
+dist
+public
+*.min.js
+*.bundle.js
+

frontend/README.md

@@ -55,22 +55,25 @@ This will create an optimized build of your app in the dist/ folder, which can b
 Here's an overview of the folder structure:
 
 ```markdown
-├── public/ # Static assets like favicon, robots.txt and manifests.
-├── src/ # main application codes are here.
-│ ├── app/ # Contains the application routes and providers.
-│ ├── assets/ # Static assets specific to the app (images, icons, etc.).
-│ ├── components/ # Reusable components and layouts.
-| |── features/ # Contains the main features of the application.
-│ ├── hook/ # Reusable hooks.
-│ ├── styles/ # Global styles.
-│ ├── utils/ # Utility functions, application content and constants.
-│ ├── config/ # Environment variable configuration object.
-│ ├── services/ # Axios API clients and services.
-│ ├── types/ # Reusable types.
-│ └── main.tsx # Entry point of the React app.
-├── docs/ # ARD documentation for some of the decisions made for the app.
-└── vercel.json # To prevent the custom 404 page from Vercel when a route is visited. (This is just for the demo site deployed on Vercel.)
-└── ... # Other configuration files like tsconfig.json, vite.config.mts etc.
+├── public/ - Static assets like favicon, robots.txt and manifests.
+├── src/ - Main application codes are here.
+│ ├── app/ - Contains the application routes and providers.
+│ ├── assets/ - Static assets specific to the app (images, icons, etc.).
+│ ├── components/ - Reusable components and layouts.
+│ ├── config/ - Environment variables configuration.
+│ ├── constants/ - App UI contents and constants.
+│ ├── enums/ - Reusable enums.
+| |── features/ - Contains the main features of the application.
+│ ├── hook/ - Reusable hooks.
+│ ├── layouts/ - Core layouts of the application.
+│ ├── services/ - Axios API clients and services.
+│ ├── styles/ - Global styles.
+│ ├── types/ - Reusable types.
+│ ├── utils/ - Utility functions, application content and constants.
+│ └── main.tsx - Entry point of the React app.
+├── docs/ - ARD documentation for some of the decisions made for the app.
+└── vercel.json  - To prevent the custom 404 page from Vercel when a route is visited. (This is just for the demo site deployed on Vercel.)
+└── ... Other configuration files like tsconfig.json, vite.config.mts etc.
 ```
 
 ## Codebase Standards
@@ -83,7 +86,13 @@ ESLint is used to maintain code quality and adhering to coding standards.
 
 #### Prettier
 
-Prettier is a used to maintain consistent code formatting in the project.
+Prettier is a used to maintain consistent code formatting in the project. To format run the code below in the terminal.
+
+```bash
+1. pnpm/npm/yarn format
+
+2. pnpm/npm/yarn format:check
+```
 
 #### TypeScript
 
@@ -107,8 +116,30 @@ Please refer to the [CONTRIBUTING](../CONTRIBUTING.md) guide for more informatio
 
 ## License
 
-See [LICENSE](../LICENSE).
-
-## Notes
-
-The **@hotosm/ui** installation directory behavior is not consisitent and failed while deploying. However using the CDN and injecting it in the `index.html` works for now.
+See [LICENSE](../LICENSE) for fAIr license.
+
+fAIr also bundles portions of the following open source software.
+
+- [Shoelace (MIT)](https://github.com/shoelace-style/shoelace).
+- [TanStack Query (MIT)](https://github.com/TanStack/query).
+- [TanStack Table (MIT)](https://github.com/TanStack/table).
+- [Terraformer WKT (MIT)](https://github.com/terraformer-js/terraformer).
+- [Turf JS (MIT)](https://github.com/Turfjs/turf).
+- [Axios (MIT)](https://github.com/axios/axios).
+- [Clsx (MIT)](https://github.com/lukeed/clsx).
+- [Framer Motion (MIT)](https://github.com/motiondivision/motion).
+- [React (MIT)](https://github.com/facebook/react).
+- [React Dropzone (MIT)](https://github.com/react-dropzone/react-dropzone).
+- [React Error Boundary (MIT)](https://github.com/bvaughn/react-error-boundary).
+- [React Confetti Explosion (MIT)](https://github.com/herrethan/react-confetti-explosion).
+- [React Markdown (MIT)](https://github.com/remarkjs/react-markdown).
+- [Remark Gfm (MIT)](https://github.com/remarkjs/remark-gfm).
+- [Tailwind Merge (MIT)](https://github.com/dcastil/tailwind-merge).
+- [React Router (MIT)](https://github.com/remix-run/react-router).
+- [Terra Draw (MIT)](https://github.com/JamesLMilner/terra-draw).
+- [Vaul (MIT)](https://github.com/emilkowalski/vaul).
+- [XMLBuilder2 (MIT)](https://github.com/oozcitak/xmlbuilder2).
+- [React Helmet Async (Apache-2.0)](https://github.com/staylor/react-helmet-async).
+- [Maplibre GL JS (BSD-3-Clause)](https://github.com/maplibre/maplibre-gl-js).
+- [PMTiles (BSD-3-Clause)](https://github.com/protomaps/PMTiles).
+- [React Medium Image Zoom (BSD-3-Clause)](https://github.com/rpearce/react-medium-image-zoom).

frontend/eslint.config.js

@@ -1,34 +1,42 @@
-import js from "@eslint/js";
-import globals from "globals";
-import reactHooks from "eslint-plugin-react-hooks";
-import reactRefresh from "eslint-plugin-react-refresh";
-import tseslint from "typescript-eslint";
+import js from '@eslint/js';
+import globals from 'globals';
+import reactHooks from 'eslint-plugin-react-hooks';
+import reactRefresh from 'eslint-plugin-react-refresh';
+import tseslint from '@typescript-eslint/eslint-plugin';
+import prettierPlugin from 'eslint-plugin-prettier';
+import prettierConfig from 'eslint-config-prettier';
+
+
+export default [
 
-export default tseslint.config(
-  { ignores: ["dist"] },
   {
-    extends: [
-      js.configs.recommended,
-      ...tseslint.configs.recommended,
-      "plugin:@tanstack/eslint-plugin-query/recommended",
-      "plugin:tailwindcss/recommended",
-    ],
-    files: ["**/*.{ts,tsx}"],
+    ignores: ['dist'],
+    files: ['**/*.{ts,tsx}'],
     languageOptions: {
       ecmaVersion: 2020,
+      sourceType: 'module',
       globals: globals.browser,
+      parser: '@typescript-eslint/parser',
     },
     plugins: {
-      "react-hooks": reactHooks,
-      "react-refresh": reactRefresh,
-      "@tanstack/query": "@tanstack/query",
+      'react-hooks': reactHooks,
+      'react-refresh': reactRefresh,
+      '@tanstack/query': '@tanstack/query',
+      'prettier': prettierPlugin,
     },
     rules: {
       ...reactHooks.configs.recommended.rules,
-      "react-refresh/only-export-components": [
-        "warn",
+      'react-refresh/only-export-components': [
+        'warn',
         { allowConstantExport: true },
       ],
+      'prettier/prettier': 'error',
+
     },
   },
-);
+  js.configs.recommended,
+  ...tseslint.configs.recommended,
+  'plugin:@tanstack/eslint-plugin-query/recommended',
+  'plugin:tailwindcss/recommended',
+  prettierConfig,
+];

frontend/package.json

@@ -7,7 +7,9 @@
     "dev": "vite",
     "build": "tsc -b && vite build",
     "lint": "eslint .",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "format": "prettier --write 'src/**/*.{js,jsx,ts,tsx,json,css,scss,md}'",
+    "format:check": "prettier --check 'src/**/*.{js,jsx,ts,tsx,json,css,scss,md}'"
   },
   "dependencies": {
     "@shoelace-style/shoelace": "^2.16.0",
@@ -36,6 +38,7 @@
     "remark-gfm": "^4.0.0",
     "tailwind-merge": "^2.5.2",
     "terra-draw": "1.0.0-beta.8",
+    "vaul": "^1.1.2",
     "xmlbuilder2": "^3.1.1"
   },
   "devDependencies": {
@@ -46,13 +49,18 @@
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
     "@types/terraformer__wkt": "^2.0.3",
+    "@typescript-eslint/eslint-plugin": "^8.18.2",
+    "@typescript-eslint/parser": "^8.18.2",
     "@vitejs/plugin-react": "^4.3.1",
     "autoprefixer": "^10.4.20",
-    "eslint": "^9.9.0",
+    "eslint": "^9.11.1",
     "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-jsx-a11y": "^6.10.2",
     "eslint-plugin-prettier": "^5.2.1",
-    "eslint-plugin-react-hooks": "^5.1.0-rc.0",
+    "eslint-plugin-react": "^7.37.3",
+    "eslint-plugin-react-hooks": "5.1.0-rc-fb9a90fa48-20240614",
     "eslint-plugin-react-refresh": "^0.4.9",
+    "eslint-plugin-tailwindcss": "^3.17.5",
     "globals": "^15.9.0",
     "postcss": "^8.4.47",
     "prettier": "3.3.3",
@@ -68,4 +76,4 @@
       "@eslint/plugin-kit@<0.2.3": ">=0.2.3"
     }
   }
-}
+}