Merge pull request #21 from hotosm/refac/pre-commit

Refactor: Formatted with precommit config

.github/workflows/pre-commit.yml

@@ -0,0 +1,29 @@
+name: Precommit Code Check
+
+on:
+  pull_request:
+    branches:
+      - master
+      - develop
+      - staging
+  push:
+    branches:
+      - "*"
+
+jobs:
+  precommit:
+    name: Code Check
+    runs-on: self-hosted
+    steps:
+      - uses: actions/checkout@v1
+
+      - name: Set up Python 3.9.17
+        uses: actions/setup-python@v2
+        with:
+          python-version: 3.9.17
+
+      - name: Check Version
+        run: python --version
+
+      - name: PreCommit
+        uses: pre-commit/action@v2.0.3

package.json

@@ -0,0 +1,10 @@
+{
+  "devDependencies": {
+    "autoprefixer": "^10.4.19",
+    "concurrently": "^8.2.2",
+    "postcss": "^8.4.39",
+    "prettier": "^3.3.2",
+    "prettier-plugin-tailwindcss": "^0.6.5",
+    "tailwindcss": "^3.4.4"
+  }
+}

src/frontend/.lintstagedrc

@@ -1,3 +1,3 @@
 {
-    "*.{js,jsx,ts,tsx}": "eslint --fix"
+  "*.{js,jsx,ts,tsx}": "eslint --fix"
 }

src/frontend/README.md

@@ -1,8 +1,5 @@
-
 ## Getting started with the starter kit
 
-
-
 1. Do not use npm to install packages, use yarn. If you want to run `npm install` then delete the `yarn.lock` file and install the packages using npm.
 
 2. Create a .env file and copy .env.sample to .env
@@ -11,12 +8,8 @@
 
 4. If there is error on "/dashboard" route then comment out the proxy setup part on `vite.config.ts` file.
 
-
-
 ## Folder Structure
 
-
-
 - [API](./src/api/readme.md)$~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~$--> Api's for the project
 
 - [Wrappers](./src/api/wrappers/readme.md)$~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~$--> Wrappers
@@ -27,15 +20,13 @@
 
 - [UI](./src/ui/readme.md)
 
+## Example to add shadcn component (select component- [link](https://ui.shadcn.com/docs/components/select) )
 
+    npx shadcn-ui add select
 
-## Example to add shadcn component (select component- [link](https://ui.shadcn.com/docs/components/select) )
+give path as
+**./src/ui/atoms/common/**
 
-	npx shadcn-ui add select
-give path as      
- **./src/ui/atoms/common/**
-
 - resolve all classes with tailwind prefix
 - replace classes with color variables with project color variables
 - add missing dependencies ( if npx failed to install dependencies automatically e.g: @radix-ui/react-select )
-

src/frontend/components.json

@@ -1,16 +1,16 @@
 {
   "$schema": "https://ui.shadcn.com/schema.json",
-  "style": "default",
+  "aliases": {
+    "components": "components/RadixComponents",
+    "utils": "@/lib/utils"
+  },
   "rsc": true,
-  "tsx": true,
+  "style": "default",
   "tailwind": {
+    "baseColor": "slate",
     "config": "tailwind.config.js",
     "css": "src/assets/css/tailwind.css",
-    "baseColor": "slate",
     "cssVariables": true
   },
-  "aliases": {
-    "components": "components/RadixComponents",
-    "utils": "@/lib/utils"
-  }
-}
+  "tsx": true
+}

src/frontend/package.json

@@ -1,15 +1,4 @@
 {
-  "name": "starterkit-v2",
-  "private": true,
-  "version": "0.0.0",
-  "type": "module",
-  "scripts": {
-    "start": "vite",
-    "dev": "vite",
-    "build": "tsc && vite build",
-    "preview": "vite preview",
-    "lint": "eslint ./src/ --ext .ts,.tsx --fix"
-  },
   "dependencies": {
     "@mapbox/mapbox-gl-draw": "^1.4.2",
     "@mapbox/mapbox-gl-draw-static-mode": "^1.0.1",
@@ -44,6 +33,7 @@
     "date-fns": "^2.30.0",
     "dom-to-code": "^1.5.4",
     "dotenv": "^16.0.3",
+    "framer-motion": "^11.2.9",
     "geojson": "^0.5.0",
     "geojson-validation": "^1.0.2",
     "html2canvas": "^1.4.1",
@@ -58,7 +48,6 @@
     "react-redux": "^8.0.5",
     "react-router-dom": "^6.10.0",
     "react-toastify": "^9.1.3",
-    "framer-motion": "^11.2.9",
     "react-transition-group": "^4.4.5",
     "recharts": "^2.7.2",
     "redux-persist": "^6.0.0",
@@ -101,5 +90,16 @@
       "eslint --fix",
       "prettier --cache --write"
     ]
-  }
+  },
+  "name": "starterkit-v2",
+  "private": true,
+  "scripts": {
+    "build": "tsc && vite build",
+    "dev": "vite",
+    "lint": "eslint ./src/ --ext .ts,.tsx --fix",
+    "preview": "vite preview",
+    "start": "vite"
+  },
+  "type": "module",
+  "version": "0.0.0"
 }

src/frontend/src/api/projects.ts

@@ -1,11 +1,14 @@
-import { UseQueryOptions, useQuery } from "@tanstack/react-query";
-import { getProjectsList } from "@Services/createproject";
+import { UseQueryOptions, useQuery } from '@tanstack/react-query';
+import { getProjectsList } from '@Services/createproject';
 
-export const useGetProjectsListQuery = (id?:number, queryOptions?: Partial<UseQueryOptions>) => {
+export const useGetProjectsListQuery = (
+  id?: number,
+  queryOptions?: Partial<UseQueryOptions>,
+) => {
   return useQuery({
     queryKey: ['projects-list'],
     queryFn: () => getProjectsList(id),
     select: (res: any) => res.data,
     ...queryOptions,
   });
-};
+};

src/frontend/src/components/CreateProject/StepSwitcher/index.tsx

@@ -47,7 +47,7 @@ export default function StepSwitcher({
                       activeStep === index
                         ? 'currentstep-pointer pulse-animation naxatw-border-red'
                         : ''
-                    } naxatw-flex naxatw-items-center naxatw-justify-center naxatw-rounded-full naxatw-border-[0.15rem] lg:naxatw-h-7 lg:naxatw-w-7 xl:naxatw-h-9 xl:naxatw-w-9  ${
+                    } naxatw-flex naxatw-items-center naxatw-justify-center naxatw-rounded-full naxatw-border-[0.15rem] lg:naxatw-h-7 lg:naxatw-w-7 xl:naxatw-h-9 xl:naxatw-w-9 ${
                       activeStep > index
                         ? 'naxatw-border-red naxatw-bg-red'
                         : 'naxatw-bg-transparent'

src/frontend/src/components/LandingPage/Footer/index.tsx

@@ -40,7 +40,7 @@ export default function Footer() {
           variants={fadeUpVariant}
           initial="hidden"
           whileInView="visible"
-          className="naxatw-flex naxatw-w-full naxatw-flex-col naxatw-items-center naxatw-justify-between naxatw-gap-8 naxatw-border-b naxatw-border-t naxatw-border-landing-white naxatw-px-5 naxatw-py-8 naxatw-text-landing-grey md:naxatw-flex-row  md:naxatw-px-9 lg:naxatw-px-32"
+          className="naxatw-flex naxatw-w-full naxatw-flex-col naxatw-items-center naxatw-justify-between naxatw-gap-8 naxatw-border-b naxatw-border-t naxatw-border-landing-white naxatw-px-5 naxatw-py-8 naxatw-text-landing-grey md:naxatw-flex-row md:naxatw-px-9 lg:naxatw-px-32"
         >
           <div className="naxatw-text-center md:naxatw-text-start">
             <span className="naxatw-font-medium">Developed & Designed by</span>

src/frontend/src/components/LandingPage/Navbar/index.tsx

@@ -5,7 +5,7 @@ export default function Navbar() {
     <header>
       <FlexRow
         gap={10}
-        className="naxatw-border-landing-white naxatw-bg-landing-red naxatw-text-landing-white naxatw-justify-center naxatw-px-20 naxatw-py-2 naxatw-text-xs lg:naxatw-justify-end"
+        className="naxatw-justify-center naxatw-border-landing-white naxatw-bg-landing-red naxatw-px-20 naxatw-py-2 naxatw-text-xs naxatw-text-landing-white lg:naxatw-justify-end"
       >
         <FlexRow
           gap={5}

src/frontend/src/components/LandingPage/OpenSource/index.tsx

@@ -9,10 +9,10 @@ export default function OpenSource() {
       <div className="naxatw-container !naxatw-max-w-full naxatw-pt-10 md:naxatw-pt-40">
         <FlexColumn className="naxatw-items-center naxatw-gap-10 naxatw-text-center">
           <div>
-            <p className="naxatw-text-[2rem] naxatw-leading-[2.688rem] naxatw-text-landing-red md:naxatw-text-[4.375rem] md:naxatw-leading-[5rem] ">
+            <p className="naxatw-text-[2rem] naxatw-leading-[2.688rem] naxatw-text-landing-red md:naxatw-text-[4.375rem] md:naxatw-leading-[5rem]">
               Open Source
             </p>
-            <p className="naxatw-text-[2rem] naxatw-leading-[2.688rem] naxatw-text-landing-red md:naxatw-text-[4.375rem] md:naxatw-leading-[5rem] ">
+            <p className="naxatw-text-[2rem] naxatw-leading-[2.688rem] naxatw-text-landing-red md:naxatw-text-[4.375rem] md:naxatw-leading-[5rem]">
               Drone Tasking Manager
             </p>
           </div>

src/frontend/src/components/RadixComponents/Button.tsx

@@ -7,8 +7,8 @@ import Icon from '@Components/common/Icon';
 import Spinner from '@Components/common/Spinner';
 
 const buttonVariants = cva(
-  `naxatw-inline-flex naxatw-items-center naxatw-justify-center naxatw-rounded-md naxatw-text-sm 
-  naxatw-font-bold naxatw-transition-colors focus-visible:naxatw-outline-none focus-visible:naxatw-ring-2 
+  `naxatw-inline-flex naxatw-items-center naxatw-justify-center naxatw-rounded-md naxatw-text-sm
+  naxatw-font-bold naxatw-transition-colors focus-visible:naxatw-outline-none focus-visible:naxatw-ring-2
   focus-visible:ring-ring focus-visible:naxatw-ring-offset-2 disabled:naxatw-opacity-50 disabled:naxatw-pointer-events-none`,
   {
     variants: {
@@ -17,7 +17,7 @@ const buttonVariants = cva(
           'naxatw-bg-primary-400 naxatw-text-white hover:naxatw-shadow-top hover:naxatw-shadow-primary-400',
         destructive:
           'naxatw-bg-red-500 naxatw-text-white hover:naxatw-shadow-top hover:naxatw-shadow-red-500',
-        outline: `naxatw-border naxatw-text-primary-400 naxatw-border-primary-400 naxatw-border-input 
+        outline: `naxatw-border naxatw-text-primary-400 naxatw-border-primary-400 naxatw-border-input
         hover:naxatw-shadow-top naxatw-bg-white`,
         secondary:
           'naxatw-bg-white naxatw-text-primary-400 naxatw-border naxatw-border-primary-400 hover:naxatw-shadow-top',

src/frontend/src/components/RadixComponents/Image.tsx

@@ -17,7 +17,7 @@ export default function Image({
 }: IProps): JSX.Element {
   return (
     <div
-      className={`image-cover naxatw-aspect-${aspectRation} ${styleClass}}  `}
+      className={`image-cover naxatw-aspect-${aspectRation} ${styleClass}} `}
       style={{ aspectRatio: aspectRation }}
     >
       <img src={src} alt={alt} width={width} className={className} />

src/frontend/src/components/RadixComponents/Popover.tsx

@@ -23,11 +23,7 @@ const PopoverContent = React.forwardRef<
       align={align}
       sideOffset={sideOffset}
       className={cn(
-        `naxatw-z-50 naxatw-w-64 naxatw-rounded-md naxatw-border naxatw-bg-white naxatw-p-4 naxatw-text-grey-800
-        naxatw-shadow-lg naxatw-outline-none data-[state=open]:naxatw-animate-in data-[state=closed]:naxatw-animate-out
-        data-[state=closed]:naxatw-fade-out-0 data-[state=open]:naxatw-fade-in-0 data-[state=closed]:naxatw-zoom-out-95
-        data-[state=open]:naxatw-zoom-in-95 data-[side=bottom]:naxatw-slide-in-from-top-2 data-[side=left]:naxatw-slide-in-from-right-2
-        data-[side=right]:naxatw-slide-in-from-left-2 data-[side=top]:naxatw-slide-in-from-bottom-2`,
+        `naxatw-z-50 naxatw-w-64 naxatw-rounded-md naxatw-border naxatw-bg-white naxatw-p-4 naxatw-text-grey-800 naxatw-shadow-lg naxatw-outline-none data-[state=open]:naxatw-animate-in data-[state=closed]:naxatw-animate-out data-[state=closed]:naxatw-fade-out-0 data-[state=open]:naxatw-fade-in-0 data-[state=closed]:naxatw-zoom-out-95 data-[state=open]:naxatw-zoom-in-95 data-[side=bottom]:naxatw-slide-in-from-top-2 data-[side=left]:naxatw-slide-in-from-right-2 data-[side=right]:naxatw-slide-in-from-left-2 data-[side=top]:naxatw-slide-in-from-bottom-2`,
         className,
       )}
       {...props}

src/frontend/src/components/RadixComponents/Switch.tsx

@@ -8,21 +8,15 @@ const Switch = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <SwitchPrimitives.Root
     className={cn(
-      `peer focus-visible:naxatw-ring-offset-background naxatw-inline-flex naxatw-h-[16px] naxatw-w-[26px] naxatw-shrink-0 naxatw-cursor-pointer naxatw-items-center
-        naxatw-rounded-full naxatw-border-2 naxatw-border-transparent naxatw-transition-colors
-        focus-visible:naxatw-outline-none  focus-visible:naxatw-ring-2 focus-visible:naxatw-ring-offset-2
-        disabled:naxatw-cursor-not-allowed disabled:naxatw-opacity-50 data-[state=checked]:naxatw-bg-red
-        data-[state=unchecked]:naxatw-bg-[#555555]`,
+      `peer focus-visible:naxatw-ring-offset-background naxatw-inline-flex naxatw-h-[16px] naxatw-w-[26px] naxatw-shrink-0 naxatw-cursor-pointer naxatw-items-center naxatw-rounded-full naxatw-border-2 naxatw-border-transparent naxatw-transition-colors focus-visible:naxatw-outline-none focus-visible:naxatw-ring-2 focus-visible:naxatw-ring-offset-2 disabled:naxatw-cursor-not-allowed disabled:naxatw-opacity-50 data-[state=checked]:naxatw-bg-red data-[state=unchecked]:naxatw-bg-[#555555]`,
       className,
     )}
     {...props}
     ref={ref}
   >
     <SwitchPrimitives.Thumb
       className={cn(
-        `naxatw-pointer-events-none naxatw-block naxatw-h-3 naxatw-w-3 naxatw-rounded-full naxatw-bg-white
-          naxatw-shadow-lg naxatw-ring-0 naxatw-transition-transform
-          data-[state=checked]:naxatw-translate-x-2.5 data-[state=unchecked]:naxatw-translate-x-0`,
+        `naxatw-pointer-events-none naxatw-block naxatw-h-3 naxatw-w-3 naxatw-rounded-full naxatw-bg-white naxatw-shadow-lg naxatw-ring-0 naxatw-transition-transform data-[state=checked]:naxatw-translate-x-2.5 data-[state=unchecked]:naxatw-translate-x-0`,
       )}
     />
   </SwitchPrimitives.Root>

src/frontend/src/components/RadixComponents/Table.tsx

@@ -9,7 +9,7 @@ const Table = React.forwardRef<
     <table
       ref={ref}
       className={cn(
-        'naxatw-relative  naxatw-w-full naxatw-caption-bottom naxatw-text-sm ',
+        'naxatw-relative naxatw-w-full naxatw-caption-bottom naxatw-text-sm',
         className,
       )}
       {...props}
@@ -82,7 +82,7 @@ const TableHead = React.forwardRef<
   <th
     ref={ref}
     className={cn(
-      'naxatw-border-r-[1px] naxatw-border-white naxatw-bg-primary-400 naxatw-p-2 naxatw-font-bold naxatw-text-white [&:has([role=checkbox])]:naxatw-pr-0',
+      'naxatw-bg-primary-400 naxatw-border-r-[1px] naxatw-border-white naxatw-p-2 naxatw-font-bold naxatw-text-white [&:has([role=checkbox])]:naxatw-pr-0',
       className,
     )}
     {...props}
@@ -109,7 +109,7 @@ const TableCaption = React.forwardRef<
   HTMLTableCaptionElement,
   React.HTMLAttributes<HTMLTableCaptionElement>
 >(({ className, ...props }, ref) => (
-  <caption ref={ref} className={cn('naxatw-mt-4 ', className)} {...props} />
+  <caption ref={ref} className={cn('naxatw-mt-4', className)} {...props} />
 ));
 TableCaption.displayName = 'TableCaption';
 

src/frontend/src/components/RadixComponents/ToolTip.tsx

@@ -35,19 +35,12 @@ export default function ToolTip({
           <TooltipTrigger onClick={onClick}>
             <Icon
               name={name}
-              className={`naxatw-text-grey-500 hover:naxatw-animate-pulse hover:naxatw-text-primary-400 ${iconClassName}`}
+              className={`hover:naxatw-text-primary-400 naxatw-text-grey-500 hover:naxatw-animate-pulse ${iconClassName}`}
             />
           </TooltipTrigger>
           {message && (
             <TooltipContent
-              className="data-[state=delayed-open]:data-[side=top]:naxatw-animate-slideDownAndFade 
-                data-[state=delayed-open]:data-[side=right]:naxatw-animate-slideLeftAndFade 
-                data-[state=delayed-open]:data-[side=left]:naxatw-animate-slideRightAndFade 
-                data-[state=delayed-open]:data-[side=bottom]:naxatw-animate-slideUpAndFade 
-                naxatw-max-w-xs naxatw-select-none naxatw-rounded naxatw-bg-grey-900 naxatw-px-[15px] naxatw-py-[10px] 
-                naxatw-text-sm naxatw-leading-none naxatw-text-white
-                naxatw-shadow-[hsl(206_22%_7%_/_35%)_0px_10px_38px_-10px,_hsl(206_22%_7%_/_20%)_0px_10px_20px_-15px]
-                naxatw-will-change-[transform,opacity]"
+              className="data-[state=delayed-open]:data-[side=top]:naxatw-animate-slideDownAndFade data-[state=delayed-open]:data-[side=right]:naxatw-animate-slideLeftAndFade data-[state=delayed-open]:data-[side=left]:naxatw-animate-slideRightAndFade data-[state=delayed-open]:data-[side=bottom]:naxatw-animate-slideUpAndFade naxatw-max-w-xs naxatw-select-none naxatw-rounded naxatw-bg-grey-900 naxatw-px-[15px] naxatw-py-[10px] naxatw-text-sm naxatw-leading-none naxatw-text-white naxatw-shadow-[hsl(206_22%_7%_/_35%)_0px_10px_38px_-10px,_hsl(206_22%_7%_/_20%)_0px_10px_20px_-15px] naxatw-will-change-[transform,opacity]"
               side={side}
               sideOffset={10}
             >

src/frontend/src/components/common/Charts/BarChart/index.tsx

@@ -41,7 +41,7 @@ const CustomizedLabel = (props: any) => {
 const CustomTooltip = ({ active, payload, label }: any) => {
   if (active && payload && payload.length) {
     return (
-      <div className="custom-tooltip naxatw-relative naxatw-z-20 naxatw-rounded-xl naxatw-border-2 naxatw-bg-white naxatw-px-3 naxatw-py-2 naxatw-text-sm naxatw-text-primary-400">
+      <div className="custom-tooltip naxatw-text-primary-400 naxatw-relative naxatw-z-20 naxatw-rounded-xl naxatw-border-2 naxatw-bg-white naxatw-px-3 naxatw-py-2 naxatw-text-sm">
         <p className="label naxatw-font-bold">{label}</p>
         {payload?.map((item: any) => {
           if (item.dataKey !== 'name')

src/frontend/src/components/common/Charts/ChartContainer/index.tsx

@@ -77,10 +77,10 @@ export default function ChartContainer<T>({
         className={`card ${
           // eslint-disable-next-line no-nested-ternary
           type === 'donut'
-            ? 'naxatw-col-span-12 naxatw-flex  naxatw-h-full naxatw-items-center sm:naxatw-col-span-6 md:naxatw-col-span-12 lg:naxatw-col-span-6 '
+            ? 'naxatw-col-span-12 naxatw-flex naxatw-h-full naxatw-items-center sm:naxatw-col-span-6 md:naxatw-col-span-12 lg:naxatw-col-span-6'
             : yLabel
               ? 'naxatw-col-span-12'
-              : 'naxatw-col-span-12  naxatw-h-full naxatw-overflow-y-hidden'
+              : 'naxatw-col-span-12 naxatw-h-full naxatw-overflow-y-hidden'
         } ${scrollable ? 'scrollbar naxatw-overflow-auto' : ''}`}
       >
         {chart && chart({ data, fills, scrollable })}
@@ -94,7 +94,7 @@ export default function ChartContainer<T>({
         <div
           className={`legend ${
             type === 'donut'
-              ? 'naxatw-col-span-12 naxatw-flex naxatw-items-center naxatw-justify-start  sm:naxatw-col-span-6 md:naxatw-col-span-12 lg:naxatw-col-span-6'
+              ? 'naxatw-col-span-12 naxatw-flex naxatw-items-center naxatw-justify-start sm:naxatw-col-span-6 md:naxatw-col-span-12 lg:naxatw-col-span-6'
               : 'naxatw-col-span-11 naxatw-col-start-1 naxatw-col-end-13'
           } `}
         >