Huge bump of versions + husky + fixed DropDown key issue and pointer (#628)

* Bump lint-staged

* Check

* Check

* Added husky

* Check

* Check

* Check

* Check

* Check

* Check

* Check

* Check

* Fix husky

* Used * instead **/* in lint-staged

* Bump tailwindcss and related

* Added @tailwindcss/vite and removed postcss

* Added lint into staged

* Bump @babel/core and updated .prettierignore

* Removed tailwind.config.cjs

* Added ThemeInit

* Added cursor-pointer to Help dropdown

* Bump react-router

* Removed @types/uuid and react-router-dom

* Bump diff2html, prettier, @typescript-eslint/eslint-plugin, @typescript-eslint/parser

* removed vite-plugin-html-config and @babel/core

* removed "@eslint/eslintrc" and "@eslint/js"

* Removed redundant link

* Returned plugins and source to index.css

* Set dark to false in tailwindcss

* Fixed storybook

* Fixed useGetLatestVersion with correct gcTime: 0 option

* Added eslint-plugin-prettier

* Removed spaces

* ClustersList.tsx improved and type fixes for another files

* Repository.tsx improved

* Huge fix of types

* Huge fix of types missed

* Fixed type of SingleValue

* Added cursor pointer

frontend/src/components/common/DropDown.tsx

@@ -1,4 +1,4 @@
-import { ReactNode, useEffect, useRef, useState } from "react";
+import { Fragment, ReactNode, useEffect, useRef, useState } from "react";
 import ArrowDownIcon from "../../assets/arrow-down-icon.svg";
 
 export type DropDownItem = {
@@ -62,7 +62,7 @@ function DropDown({ items }: DropDownProps) {
               Y: e.pageY,
             }));
           }}
-          className="flex items-center justify-between"
+          className="flex items-center justify-between cursor-pointer"
         >
           Help
           <img src={ArrowDownIcon} className="ml-2 w-[10px] h-[10px]" />
@@ -71,10 +71,10 @@ function DropDown({ items }: DropDownProps) {
       {popupState.isOpen && (
         <div
           ref={modalRef}
-          className={`z-10 flex flex-col py-1 gap-1 bg-white mt-3 absolute rounded border top-[${popupState.Y}] left-[${popupState.X}] border-gray-200`}
+          className={`z-10 flex flex-col py-1 gap-1 bg-white mt-3 absolute rounded-sm border top-[${popupState.Y}] left-[${popupState.X}] border-gray-200`}
         >
           {items.map((item) => (
-            <>
+            <Fragment key={item.id}>
               {item.isSeparator ? (
                 <div className="bg-gray-300 h-[1px]" />
               ) : (
@@ -96,7 +96,7 @@ function DropDown({ items }: DropDownProps) {
                   <span>{item.text}</span>
                 </div>
               )}
-            </>
+            </Fragment>
           ))}
         </div>
       )}