docs: added documentation + some housekeeping

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.

frontend/src/app/routes/models/index.tsx

@@ -21,7 +21,7 @@ import {
 import Pagination, {
   PAGE_LIMIT,
 } from "@/features/models/components/pagination";
-import { buildDateFilterQueryString } from "@/utils";
+import { APP_CONTENT, buildDateFilterQueryString } from "@/utils";
 import { PageHeader } from "@/features/models/components/";
 import { dateFilters } from "@/features/models/components/filters/date-range-filter";
 import { ORDERING_FIELDS } from "@/features/models/components/filters/ordering-filter";
@@ -68,6 +68,7 @@ const ClearFilters = ({
   return (
     <div className={`${isMobile ? "block md:hidden" : "hidden md:block"}`}>
       {canClearAllFilters ? (
+        // @ts-expect-error bad type definition
         <Button variant="tertiary" size="medium" onClick={clearAllFilters}>
           Clear filters
         </Button>
@@ -90,7 +91,9 @@ const SetMapToggle = ({
       className={`${isMobile ? "inline-flex md:hidden" : "hidden md:inline-flex"} items-center gap-x-4`}
       role="button"
     >
-      <p className="text-body-2base text-nowrap">Map View</p>
+      <p className="text-body-2base text-nowrap">
+        {APP_CONTENT.models.modelsList.filtersSection.mapViewToggleText}
+      </p>
       <Switch
         checked={query[SEARCH_PARAMS.mapIsActive] as boolean}
         disabled={query[SEARCH_PARAMS.layout] == LayoutView.LIST}
@@ -370,7 +373,13 @@ export const ModelsPage = () => {
         ) : (
           <div className="flex items-center justify-between w-full my-10">
             <div className="w-full flex items-center justify-between">
-              <p className="font-semibold text-body-3">{data?.count} models</p>
+              <p className="font-semibold text-body-3">
+                {data?.count}{" "}
+                {
+                  APP_CONTENT.models.modelsList.sortingAndPaginationSection
+                    .modelCountSuffix
+                }
+              </p>
               <SetMapToggle query={query} updateQuery={updateQuery} isMobile />
             </div>
             <div className="flex items-center gap-x-9">

frontend/src/app/routes/models/model-details.tsx

@@ -14,7 +14,7 @@ import {
 import { ModelDetailsSkeleton } from "@/features/models/components/skeletons";
 import { useModelDetails } from "@/features/models/hooks/use-models";
 import { useDialog } from "@/hooks/use-dialog";
-import { APPLICATION_ROUTES } from "@/utils";
+import { APP_CONTENT, APPLICATION_ROUTES } from "@/utils";
 import { useEffect } from "react";
 import { useNavigate, useParams } from "react-router-dom";
 
@@ -61,25 +61,31 @@ export const ModelDetailsPage = () => {
           openModelFilesDialog={openModelFilesDialog}
           openTrainingAreaDialog={openDialog}
         />
-        <ModelDetailsSection title="Properties">
+        <ModelDetailsSection
+          title={APP_CONTENT.models.modelsDetailsCard.propertiesSectionTitle}
+        >
           <ModelDetailsProperties
             trainingId={data?.published_training as number}
             thumbnailURL={data?.thumbnail_url}
           />
         </ModelDetailsSection>
         <div className="flex md:hidden">
           <ButtonWithIcon
-            label="Submit a training request"
+            label={APP_CONTENT.models.modelsDetailsCard.submitTrainingRequest}
             variant="dark"
             size="medium"
             prefixIcon={RequestIcon}
           />
         </div>
         {/* mobile */}
-        <ModelDetailsSection title="Training History">
+        <ModelDetailsSection
+          title={
+            APP_CONTENT.models.modelsDetailsCard.trainingHistorySectionTitle
+          }
+        >
           <div className="md:flex self-end hidden">
             <ButtonWithIcon
-              label="Submit a training request"
+              label={APP_CONTENT.models.modelsDetailsCard.submitTrainingRequest}
               variant="dark"
               size="medium"
               prefixIcon={RequestIcon}

frontend/src/app/routes/not-found.tsx

@@ -33,7 +33,7 @@ export const PageNotFound = () => {
                   : APP_CONTENT.pageNotFound.messages.pageNotFound}
           </p>
         </div>
-        <h1 className="w-[200px] text-[200px] lg:w-[450px] lg:text-[450px] flex items-center justify-center font-semibold text-light-gray relative">
+        <h1 className="w-72 text-[200px] lg:w-[450px] lg:text-[450px] flex items-center justify-center font-semibold text-light-gray relative">
           404
           <span className="absolute flex items-center w-full justify-center h-full">
             {/* Icon */}

frontend/src/components/errors/fallback.tsx

@@ -16,7 +16,7 @@ const MainErrorFallback = () => {
         <Button
           variant="primary"
           onClick={() => window.location.reload()}
-          className="max-w-[300px]"
+          className="max-w-80"
         >
           {APP_CONTENT.errorBoundary.button}
         </Button>

frontend/src/components/errors/under-construction.tsx

@@ -13,7 +13,7 @@ const PageUnderConstruction = () => {
       <Button
         variant="primary"
         onClick={() => window.location.assign(window.location.origin)}
-        className="max-w-[300px]"
+        className="max-w-80"
       >
         {APP_CONTENT.construction.button}
       </Button>

frontend/src/components/layouts/root-layout.tsx

@@ -5,7 +5,7 @@ import { useEffect } from "react";
 
 const RootLayout = () => {
   const { pathname } = useLocation();
-  // Scroll to top on new page.
+  // Scroll to top on page switch.
   useEffect(() => {
     window.scrollTo(0, 0);
   }, [pathname]);

frontend/src/components/ui/animated-beam/animated-beam.tsx

@@ -5,9 +5,9 @@ import { RefObject, useEffect, useId, useState } from "react";
 import { motion } from "framer-motion";
 import { cn } from "@/utils";
 
-export interface AnimatedBeamProps {
+type AnimatedBeamProps = {
   className?: string;
-  containerRef: RefObject<HTMLElement>; // Container ref
+  containerRef: RefObject<HTMLElement>;
   fromRef: RefObject<HTMLElement>;
   toRef: RefObject<HTMLElement>;
   curvature?: number;
@@ -23,9 +23,9 @@ export interface AnimatedBeamProps {
   startYOffset?: number;
   endXOffset?: number;
   endYOffset?: number;
-}
+};
 
-export const AnimatedBeam: React.FC<AnimatedBeamProps> = ({
+const AnimatedBeam: React.FC<AnimatedBeamProps> = ({
   className,
   containerRef,
   fromRef,
@@ -187,3 +187,5 @@ export const AnimatedBeam: React.FC<AnimatedBeamProps> = ({
     </svg>
   );
 };
+
+export default AnimatedBeam;

frontend/src/components/ui/animated-beam/index.ts

@@ -1 +1 @@
-export * from "./animated-beam";
+export { default as AnimatedBeam } from "./animated-beam";

frontend/src/components/ui/badge/badge.tsx

@@ -1,4 +1,5 @@
 import { TBadgeVariants } from "@/types";
+import { cn } from "@/utils";
 
 type BadgeProps = {
   variant: TBadgeVariants;
@@ -24,7 +25,9 @@ const Badge: React.FC<BadgeProps> = ({
   };
   return (
     <button
-      className={`h-8 w-fit ${variants[variant]} ${rounded ? "rounded-full p-2" : "rounded-2xl py-1 px-3 "} ${className}`}
+      className={cn(
+        `h-8 w-fit ${variants[variant]} ${rounded ? "rounded-full p-2" : "rounded-2xl py-1 px-3 "} ${className}`,
+      )}
       onClick={onClick}
     >
       <span className="font-medium capitalize text-body-3 flex items-center justify-center">

frontend/src/components/ui/button/button.tsx

@@ -1,21 +1,14 @@
 import SlButton from "@shoelace-style/shoelace/dist/react/button/index.js";
 import "./button.css";
 import { Spinner } from "@/components/ui/spinner";
-
-export type ButtonVariant =
-  | "primary"
-  | "secondary"
-  | "tertiary"
-  | "default"
-  | "dark";
-
-export type ButtonSize = "large" | "medium" | "small";
+import { cn } from "@/utils";
+import { ButtonSize, ButtonVariant } from "@/types";
 
 type ButtonProps = {
   children: React.ReactNode;
   variant?: ButtonVariant;
   className?: string;
-  onClick?: (event: any) => void;
+  onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
   spinner?: boolean;
   size?: ButtonSize;
   disabled?: boolean;
@@ -41,8 +34,11 @@ const Button: React.FC<ButtonProps> = ({
       //@ts-expect-error bad type definition
       variant={variant}
       size={size}
-      className={`button ${variant} ${className} ${capitalizeText && "capitalize"}`}
+      className={cn(
+        `button ${variant} ${className} ${capitalizeText && "capitalize"}`,
+      )}
       style={{ width: "100%" }}
+      //@ts-expect-error bad type definition
       onClick={onClick}
       disabled={disabled}
       slot={slot}

frontend/src/components/ui/button/icon-button.tsx

@@ -1,6 +1,17 @@
-import Button, { ButtonSize, ButtonVariant } from "./button";
+import { ButtonSize, ButtonVariant } from "@/types";
+import { Button } from "@/components/ui/button";
 
-const ButtonWithIcon = ({
+type ButtonWithIconProps = {
+  onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+  label: string;
+  variant: ButtonVariant;
+  size?: ButtonSize;
+  prefixIcon: React.ElementType;
+  suffixIcon?: React.ElementType;
+  capitalizeText?: boolean;
+  className?: string;
+};
+const ButtonWithIcon: React.FC<ButtonWithIconProps> = ({
   onClick,
   prefixIcon: PrefixIcon,
   suffixIcon: SuffixIcon,
@@ -9,15 +20,6 @@ const ButtonWithIcon = ({
   size = "medium",
   capitalizeText = true,
   className,
-}: {
-  onClick?: () => void;
-  label: string;
-  variant: ButtonVariant;
-  size?: ButtonSize;
-  prefixIcon: React.ElementType;
-  suffixIcon?: React.ElementType;
-  capitalizeText?: boolean;
-  className?: string;
 }) => (
   <div role="button">
     <Button

frontend/src/components/ui/codeblock/index.ts

@@ -1 +1 @@
-export * from "./codeblock";
+export { default as CodeBlock } from "./codeblock";

frontend/src/components/ui/data-table/data-table.tsx

@@ -20,21 +20,21 @@ import {
   TableRow,
 } from "@/components/ui/table";
 
-interface DataTableProps<TData, TValue> {
+type DataTableProps<TData, TValue> = {
   columns: ColumnDef<TData, TValue>[];
   data: TData[];
   sorting?: SortingState;
   setSorting?: React.Dispatch<React.SetStateAction<SortingState>>;
   onRowClick?: (row: TData) => void;
-}
+};
 
-export function DataTable<TData, TValue>({
+const DataTable = <TData, TValue>({
   columns,
   data,
   sorting,
   setSorting,
   onRowClick,
-}: DataTableProps<TData, TValue>) {
+}: DataTableProps<TData, TValue>) => {
   const table = useReactTable({
     data,
     columns,
@@ -91,4 +91,6 @@ export function DataTable<TData, TValue>({
       </TableBody>
     </Table>
   );
-}
+};
+
+export default DataTable;

frontend/src/components/ui/data-table/index.ts

@@ -1 +1 @@
-export * from "./data-table";
+export { default as DataTable } from "./data-table";

frontend/src/components/ui/dialog/dialog.tsx

@@ -24,7 +24,6 @@ const Dialog: React.FC<DialogProps> = ({
         e.preventDefault();
         closeDialog();
       }}
-
       style={{
         //@ts-expect-error bad type definition
         "--width":

frontend/src/components/ui/drawer/drawer.tsx

@@ -3,7 +3,7 @@ import "./drawer.css";
 
 type DrawerProps = {
   open: boolean;
-  setOpen: (v: boolean) => void;
+  setOpen: (open: boolean) => void;
   placement: "top" | "bottom" | "end";
   children: React.ReactNode;
   label?: string;

frontend/src/components/ui/dropdown/dropdown.tsx

@@ -5,6 +5,7 @@ import SlCheckbox from "@shoelace-style/shoelace/dist/react/checkbox/index.js";
 import "./dropdown.css";
 import ChevronDownIcon from "../icons/chevron-down";
 import { useEffect, useState } from "react";
+import { cn } from "@/utils";
 
 export type DropdownMenuItem = {
   value: string;
@@ -18,8 +19,8 @@ export type DropdownMenuItem = {
 type DropDownProps = {
   placement?: "bottom-end" | "top-end" | "bottom-start";
   children?: React.ReactNode;
-  onDropdownShow?: () => void;
-  onDropdownHide?: () => void;
+  onDropdownShow?: (event: React.MouseEvent<HTMLDivElement>) => void;
+  onDropdownHide?: (event: React.MouseEvent<HTMLDivElement>) => void;
   menuItems?: DropdownMenuItem[];
   dropdownIsOpened: boolean;
   className?: string;
@@ -97,7 +98,9 @@ const DropDown: React.FC<DropDownProps> = ({
   return (
     <SlDropdown
       placement={placement}
+      // @ts-expect-error bad type definition
       onSlShow={onDropdownShow}
+      // @ts-expect-error bad type definition
       onSlHide={onDropdownHide}
       className={className}
       disabled={disabled}
@@ -111,7 +114,9 @@ const DropDown: React.FC<DropDownProps> = ({
         {triggerComponent}
         {!disableCheveronIcon && (
           <ChevronDownIcon
-            className={`w-3 h-3 text-dark  ml-2 transition-all ${dropdownIsOpened && "rotate-180"}`}
+            className={cn(
+              `w-3 h-3 text-dark  ml-2 transition-all ${dropdownIsOpened && "rotate-180"}`,
+            )}
           />
         )}
       </div>
@@ -122,7 +127,7 @@ const DropDown: React.FC<DropDownProps> = ({
               <SlMenuItem
                 key={`dropdown-menu-item-${id}`}
                 value={menuItem.value}
-                className={`${menuItem.className} ${menuItemTextSize}`}
+                className={cn(`${menuItem.className} ${menuItemTextSize}`)}
                 onClick={menuItem.onClick}
                 disabled={menuItem.disabled ?? false}
               >