Merge pull request #294 from jeafreezy/fair-models

Fair models
hotosm · Oct 21, 2024 · 7fe9277 · 7fe9277
2 parents cf5f679 + d877f93
commit 7fe9277
Show file tree

Hide file tree

Showing 182 changed files with 8,586 additions and 1,543 deletions.
diff --git a/frontend/.vscode/extensions.json b/frontend/.vscode/extensions.json
@@ -6,4 +6,4 @@
     "mariusalchimavicius.json-to-ts",
     "bradlc.vscode-tailwindcss"
   ]
-}
+}
diff --git a/frontend/README.md b/frontend/README.md
@@ -1,6 +1,6 @@
 # fAIr Frontend
 
-This project is a frontend web application built using **React 18**, **TypeScript**, and **Vite**. The app leverages modern libraries such as **@hotosm/ui**, **Shoelace**, and **Framer Motion** for UI components, and **React Router** for client-side routing.
+This project is a frontend web application built using **React 18**, **TypeScript**, and **Vite**. The app leverages modern libraries such as **@hotosm/ui**, and **Shoelace** for UI components, and **React Router** for client-side routing.
 
 ## Table of Contents
 
@@ -60,6 +60,7 @@ Here's an overview of the folder structure:
 │ ├── 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.
@@ -96,10 +97,9 @@ We use absolute imports (such as `@/components`, `@/hooks`, etc.), to make it ea
 
 We use the `kebab-case` to name all files. This helps to keep your codebase consistent and easier to navigate.
 
-#### Husky
-
-We use the `husky` to trigger `eslint` and `prettier` configurations when committing code to the repository.
+#### Architectural Decisions
 
+See [the documentation](./docs/) for more information on the architectural decisions.
 
 ## Contributing
 

diff --git a/frontend/docs/README.md b/frontend/docs/README.md
@@ -18,6 +18,9 @@ In the `architecture` folder there are subfolders for each decision making. In e
 2. [Styling Library Decision](./architecture/adr-choose-styling-library/adr1.md)
 3. [Web mapping Library Decision](./architecture/adr-choose-webmap-library/adr1.md)
 4. [Drawing Library Decision](./architecture/adr-choose-drawing-library/adr1.md)
+5. [Package Manager Decision](./architecture/adr-choose-package-manager/adr1.md)
+6. [Programming Language Decision](./architecture/adr-choose-language/adr1.md)
+7. [Bundler Decision](./architecture/adr-choose-bundler/adr1.md)
 
 ## References
 

diff --git a/frontend/docs/architecture/adr-choose-styling-library/adr2.md b/frontend/docs/architecture/adr-choose-styling-library/adr2.md
@@ -39,6 +39,7 @@ We are building the fAIr website that requires a responsive and customizable use
 # Decision
 
 We've chosen to use Shoelace because it meets all our key decision criteria and aligns with the future requirements of [HOT UI](https://github.com/hotosm/ui). This alignment ensures long-term compatibility and simplifies any potential migration to a different framework in the future, if needed.
+
 # Status
 
 Accepted.

diff --git a/frontend/docs/index.md b/frontend/docs/index.md
diff --git a/frontend/eslint.config.js b/frontend/eslint.config.js
@@ -7,7 +7,12 @@ import tseslint from "typescript-eslint";
 export default tseslint.config(
   { ignores: ["dist"] },
   {
-    extends: [js.configs.recommended, ...tseslint.configs.recommended],
+    extends: [
+      js.configs.recommended,
+      ...tseslint.configs.recommended,
+      "plugin:@tanstack/eslint-plugin-query/recommended",
+      "plugin:tailwindcss/recommended",
+    ],
     files: ["**/*.{ts,tsx}"],
     languageOptions: {
       ecmaVersion: 2020,
@@ -16,6 +21,7 @@ export default tseslint.config(
     plugins: {
       "react-hooks": reactHooks,
       "react-refresh": reactRefresh,
+      "@tanstack/query": "@tanstack/query",
     },
     rules: {
       ...reactHooks.configs.recommended.rules,

diff --git a/frontend/index.html b/frontend/index.html
@@ -1,27 +1,31 @@
 <!doctype html>
 <html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <!-- Favicon  -->
+    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
+    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
+    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
+    <link rel="manifest" href="/site.webmanifest" />
+    <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5" />
 
-<head>
-  <meta charset="UTF-8" />
-  <link rel="icon" type="image/svg+xml" href="/vite.svg" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <!-- Favicon  -->
-  <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
-  <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
-  <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
-  <link rel="manifest" href="/site.webmanifest" />
-  <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5" />
+    <!-- HOT OSM UI -->
+    <link
+      rel="stylesheet"
+      href="https://s3.amazonaws.com/hotosm-ui/latest/dist/style.css"
+    />
+    <script
+      type="module"
+      src="https://s3.amazonaws.com/hotosm-ui/latest/dist/hotosm-ui.js"
+    ></script>
 
-  <!-- HOT OSM UI -->
-  <link rel="stylesheet" href="https://s3.amazonaws.com/hotosm-ui/latest/dist/style.css" />
-  <script type="module" src="https://s3.amazonaws.com/hotosm-ui/latest/dist/hotosm-ui.js"></script>
+    <title>HOT fAIr</title>
+  </head>
 
-  <title>HOT fAIr</title>
-</head>
-
-<body>
-  <div id="root"></div>
-  <script type="module" src="/src/main.tsx"></script>
-</body>
-
-</html>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
diff --git a/frontend/package.json b/frontend/package.json
@@ -11,9 +11,13 @@
   },
   "dependencies": {
     "@shoelace-style/shoelace": "^2.16.0",
+    "@tanstack/react-query": "^5.59.0",
+    "@tanstack/react-query-devtools": "^5.59.0",
+    "@tanstack/react-table": "^8.20.5",
     "axios": "^1.7.7",
     "clsx": "^2.1.1",
     "framer-motion": "^11.5.4",
+    "maplibre-gl": "^4.7.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-error-boundary": "^4.0.13",
@@ -23,6 +27,7 @@
   },
   "devDependencies": {
     "@eslint/js": "^9.9.0",
+    "@tanstack/eslint-plugin-query": "^5.58.1",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
     "@vitejs/plugin-react": "^4.3.1",
@@ -41,4 +46,4 @@
     "vite": "^5.4.1",
     "vite-tsconfig-paths": "^5.0.1"
   }
-}
+}