lint fixes

wizelineacademy · May 28, 2024 · 09eb00b · 09eb00b
1 parent 52009cd
commit 09eb00b
Show file tree

Hide file tree

Showing 14 changed files with 103 additions and 244 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -8,5 +8,7 @@
     "plugin:testing-library/react"
   ],
   "plugins": ["@typescript-eslint", "jsx-a11y", "testing-library"],
-  "rules": {}
+  "rules": {
+    "prettier/prettier": ["error", { "endOfLine": "auto" }]
+  }
 }
diff --git a/.prettierrc.json b/.prettierrc.json
@@ -1,3 +1,4 @@
 {
-  "plugins": ["prettier-plugin-tailwindcss"]
+  "plugins": ["prettier-plugin-tailwindcss"],
+  "endOfLine": "lf"
 }
diff --git a/components/ComboBoxSearch.tsx b/components/ComboBoxSearch.tsx
@@ -1,7 +1,7 @@
 "use client";
 import { useState } from "react";
 import { useRouter } from "next/navigation";
-import { Combobox, ComboboxOption, ComboboxOptions } from "@headlessui/react";
+import { Combobox } from "@headlessui/react";
 import { useQuery } from "@tanstack/react-query";
 import { searchUsers } from "@/services/user";
 import SearchBar from "./SearchBar";
@@ -59,7 +59,7 @@ const ComboBoxSearch = () => {
           className={`h-10 ${isExpanded ? "w-80" : "w-32"} rounded-full border border-gray-300 bg-white px-4 shadow-lg transition-all duration-300 focus:border-blue-500 focus:outline-none`}
         /> */}
         {query !== "" && (
-          <ComboboxOptions className="absolute z-10 mt-1 max-h-52 w-full overflow-auto rounded-md border border-gray-300 bg-white p-2 shadow-lg empty:hidden">
+          <Combobox.Options className="absolute z-10 mt-1 max-h-52 w-full overflow-auto rounded-md border border-gray-300 bg-white p-2 shadow-lg empty:hidden">
             {isLoading ? (
               <div className="relative cursor-default select-none px-4 py-2 text-gray-700">
                 Loading...
@@ -70,17 +70,17 @@ const ComboBoxSearch = () => {
               </div>
             ) : (
               people.map((person) => (
-                <ComboboxOption
+                <Combobox.Option
                   key={person.id}
                   value={person}
                   className={`flex cursor-default select-none items-center gap-2 rounded-xl px-2 py-1 text-sm text-gray-900 data-[focus]:bg-primary-light data-[focus]:text-white`}
                 >
                   <UserProfileButton size="2xs" photoUrl={person?.photoUrl} />
                   <span className="truncate">{person.name}</span>
-                </ComboboxOption>
+                </Combobox.Option>
               ))
             )}
-          </ComboboxOptions>
+          </Combobox.Options>
         )}
       </Combobox>
     </div>

diff --git a/components/ComboboxOpen.tsx b/components/ComboboxOpen.tsx
@@ -1,10 +1,5 @@
 import { useState, useEffect } from "react";
-import {
-  Combobox,
-  ComboboxInput,
-  ComboboxOption,
-  ComboboxOptions,
-} from "@headlessui/react";
+import { Combobox } from "@headlessui/react";
 import Link from "next/link";
 import UserProfileButton from "./UserProfileButton";
 
@@ -55,18 +50,18 @@ const ComboboxOpen = ({ data }: { data: DataItem[] | undefined }) => {
 
   return (
     <Combobox<DataItem | null> value={selectedItem} onChange={setSelectedItem}>
-      {({ open }) => (
+      {() => (
         <>
-          <ComboboxInput
+          <Combobox.Input
             onChange={(event) => setQuery(event.target.value)}
             displayValue={(item: DataItem | null) => (item ? item.name : "")}
             className="mb-2 w-full rounded-lg border p-2 focus:outline-none focus:ring-2 focus:ring-primary"
             placeholder="Search..."
           />
           <div>
-            <ComboboxOptions static>
+            <Combobox.Options static>
               {filteredData.map((item) => (
-                <ComboboxOption key={item.id} value={item}>
+                <Combobox.Option key={item.id} value={item}>
                   {({ active }) => (
                     <Link
                       href={
@@ -88,9 +83,9 @@ const ComboboxOpen = ({ data }: { data: DataItem[] | undefined }) => {
                       </div>
                     </Link>
                   )}
-                </ComboboxOption>
+                </Combobox.Option>
               ))}
-            </ComboboxOptions>
+            </Combobox.Options>
           </div>
         </>
       )}

diff --git a/components/Notifications.tsx b/components/Notifications.tsx
@@ -1,12 +1,6 @@
 "use client";
 
-import {
-  Menu,
-  MenuButton,
-  MenuItem,
-  MenuItems,
-  Transition,
-} from "@headlessui/react";
+import { Menu, Transition } from "@headlessui/react";
 import { Dispatch, Fragment, SetStateAction, useState } from "react";
 import CloseIcon from "./icons/CloseIcon";
 import NotificationIcon from "./icons/NotificationIcon";
@@ -75,7 +69,7 @@ const Notifications = ({
 
   return (
     <Menu as="div" className="relative inline-block text-left">
-      <MenuButton
+      <Menu.Button
         onClick={() => setIsActive(!isActive)}
         className={`${isActive ? "bg-primary" : "bg-white transition-all delay-0 hover:scale-[1.175]"} group rounded-full p-2 drop-shadow-lg`}
       >
@@ -86,7 +80,7 @@ const Notifications = ({
         {notificationsQuery.data.length > 0 && (
           <span className=" absolute -right-px -top-px flex h-3 w-3 items-center justify-center rounded-full bg-red-700 " />
         )}
-      </MenuButton>
+      </Menu.Button>
 
       <Transition
         as={Fragment}
@@ -97,8 +91,8 @@ const Notifications = ({
         leaveFrom="transform opacity-100 scale-100"
         leaveTo="transform opacity-0 scale-95"
       >
-        <MenuItems className=" absolute right-0 z-50 mt-2 box-content max-h-72 min-h-fit w-96 origin-top-right overflow-auto rounded-md bg-white px-4 shadow-lg ring-1 ring-black/5 focus:outline-none">
-          <MenuItem>
+        <Menu.Items className=" absolute right-0 z-50 mt-2 box-content max-h-72 min-h-fit w-96 origin-top-right overflow-auto rounded-md bg-white px-4 shadow-lg ring-1 ring-black/5 focus:outline-none">
+          <Menu.Item>
             {({ close }) => (
               <div className="sticky top-0 z-50 flex flex-row items-center justify-between bg-white pt-3">
                 <div className="flex flex-row gap-1">
@@ -112,11 +106,11 @@ const Notifications = ({
                 />
               </div>
             )}
-          </MenuItem>
+          </Menu.Item>
           {notificationsQuery.data.length > 0 &&
             notificationsQuery.data.map((notification, index) => {
               return (
-                <MenuItem key={index}>
+                <Menu.Item key={index}>
                   {({ close }) => (
                     <button
                       onClick={() => {
@@ -128,19 +122,19 @@ const Notifications = ({
                       <NotificationCard notification={notification} />
                     </button>
                   )}
-                </MenuItem>
+                </Menu.Item>
               );
             })}
           {notificationsQuery.data.length === 0 && (
             <div className="flex h-5/6 w-full items-center justify-center py-1">
-              <MenuItem>
+              <Menu.Item>
                 <p className="items-center py-2 text-sm">
                   No tienes ninguna notificación
                 </p>
-              </MenuItem>
+              </Menu.Item>
             </div>
           )}
-        </MenuItems>
+        </Menu.Items>
       </Transition>
     </Menu>
   );

diff --git a/components/SearchBar.tsx b/components/SearchBar.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { ComboboxInput } from "@headlessui/react";
+import { Combobox } from "@headlessui/react";
 import { useEffect, useState, useRef } from "react";
 
 interface SearchBarInterface {
@@ -56,7 +56,7 @@ const SearchBar = ({
           <div
             className={`transform transition-transform duration-700 ${isExpanded ? "-translate-x-0" : "hidden -translate-x-full"}`}
           >
-            <ComboboxInput
+            <Combobox.Input
               ref={inputRef}
               name="search"
               autoComplete="off"

diff --git a/components/UserIconNavbar.tsx b/components/UserIconNavbar.tsx
@@ -1,11 +1,5 @@
 "use client";
-import {
-  Menu,
-  MenuButton,
-  MenuItem,
-  MenuItems,
-  Transition,
-} from "@headlessui/react";
+import { Menu, Transition } from "@headlessui/react";
 import Link from "next/link";
 import { Fragment, useEffect, useState } from "react";
 import { signOut } from "next-auth/react";
@@ -45,7 +39,7 @@ const UserIconNavbar = ({
 
   return (
     <Menu as="div" className="relative inline-block text-left">
-      <MenuButton
+      <Menu.Button
         as="div"
         onClick={() => setIsClicked(!isClicked)}
         className={`${onSite || isClicked ? "bg-primary" : "bg-white transition-all delay-0 hover:scale-[1.175]"} flex rounded-full drop-shadow-lg`}
@@ -61,7 +55,7 @@ const UserIconNavbar = ({
           photoUrl={user?.photoUrl || ""}
           className="m-auto bg-transparent"
         />
-      </MenuButton>
+      </Menu.Button>
       <Transition
         as={Fragment}
         enter="transition ease-out duration-100"
@@ -71,21 +65,21 @@ const UserIconNavbar = ({
         leaveFrom="transform opacity-100 scale-100"
         leaveTo="transform opacity-0 scale-95"
       >
-        <MenuItems className="absolute right-0 z-50 mt-2 w-56 origin-top-right divide-y divide-gray-100 rounded-md bg-white shadow-lg ring-1 ring-black/5 focus:outline-none">
+        <Menu.Items className="absolute right-0 z-50 mt-2 w-56 origin-top-right divide-y divide-gray-100 rounded-md bg-white shadow-lg ring-1 ring-black/5 focus:outline-none">
           <div className="px-1 py-1 ">
-            <MenuItem>
+            <Menu.Item>
               <p className="mx-auto items-center px-2 py-2 text-sm">
                 Hello {user?.name.split(" ")[0]}!
               </p>
-            </MenuItem>
+            </Menu.Item>
           </div>
           <div className="flex flex-col gap-1 px-1 py-1">
-            <MenuItem disabled={onSite}>
-              {({ focus }) => (
+            <Menu.Item disabled={onSite}>
+              {({ active }) => (
                 <Link
                   href="/profile"
                   className={`${
-                    focus
+                    active
                       ? "bg-primary/75 text-white"
                       : onSite
                         ? "bg-primary text-white"
@@ -95,40 +89,39 @@ const UserIconNavbar = ({
                   Go Profile
                 </Link>
               )}
-            </MenuItem>
+            </Menu.Item>
             <button
               onClick={() => {
                 showSettingsModal();
               }}
             >
-              <MenuItem>
-                {({ focus }) => (
+              <Menu.Item>
+                {({ active }) => (
                   <button
                     className={`${
-                      focus ? "bg-primary/75 text-white" : "text-gray-900"
+                      active ? "bg-primary/75 text-white" : "text-gray-900"
                     } group flex w-full items-center rounded-md px-2 py-2 text-sm`}
                   >
                     Settings
                   </button>
                 )}
-              </MenuItem>
+              </Menu.Item>
             </button>
           </div>
           <button className="w-full px-1 py-1" onClick={handleSignOut}>
-            {" "}
-            <MenuItem>
-              {({ focus }) => (
+            <Menu.Item>
+              {({ active }) => (
                 <button
                   className={`${
-                    focus ? "bg-red-700 text-white" : "text-gray-900"
+                    active ? "bg-red-700 text-white" : "text-gray-900"
                   } group flex w-full items-center rounded-md px-2 py-2 text-sm`}
                 >
                   Sign Out
                 </button>
               )}
-            </MenuItem>
+            </Menu.Item>
           </button>
-        </MenuItems>
+        </Menu.Items>
       </Transition>
     </Menu>
   );

diff --git a/components/modals/ProjectSurvey.tsx b/components/modals/ProjectSurvey.tsx
@@ -1,12 +1,6 @@
 "use client";
 
-import {
-  Dialog,
-  DialogPanel,
-  DialogTitle,
-  Transition,
-  TransitionChild,
-} from "@headlessui/react";
+import { Dialog, Transition } from "@headlessui/react";
 import { Fragment } from "react";
 import Slider from "../Slider";
 import { useMutation, useQuery } from "@tanstack/react-query";
@@ -91,7 +85,7 @@ const ProjectSurvey = ({
   return (
     <Transition appear show={showModal} as={Fragment}>
       <Dialog as="div" className="relative z-50" onClose={onClose}>
-        <TransitionChild
+        <Transition.Child
           as={Fragment}
           enter="ease-out duration-300"
           enterFrom="opacity-0"
@@ -101,11 +95,11 @@ const ProjectSurvey = ({
           leaveTo="opacity-0"
         >
           <div className="fixed inset-0 bg-black/25" />
-        </TransitionChild>
+        </Transition.Child>
 
         <div className="fixed inset-0 overflow-y-auto">
           <div className="flex min-h-full items-center justify-center p-4 text-center">
-            <TransitionChild
+            <Transition.Child
               as={Fragment}
               enter="ease-out duration-300"
               enterFrom="opacity-0 scale-95"
@@ -114,13 +108,13 @@ const ProjectSurvey = ({
               leaveFrom="opacity-100 scale-100"
               leaveTo="opacity-0 scale-95"
             >
-              <DialogPanel className="flex w-full max-w-5xl transform flex-col overflow-hidden rounded-2xl bg-white p-6 text-left align-middle shadow-xl transition-all">
-                <DialogTitle
+              <Dialog.Panel className="flex w-full max-w-5xl transform flex-col overflow-hidden rounded-2xl bg-white p-6 text-left align-middle shadow-xl transition-all">
+                <Dialog.Title
                   as="h3"
                   className="text-2xl font-semibold text-black"
                 >
                   Project Survey
-                </DialogTitle>
+                </Dialog.Title>
                 <form onSubmit={handleSubmit}>
                   <div className="mt-3 grid w-full grid-cols-2 gap-10">
                     {questions.isLoading && (
@@ -186,8 +180,8 @@ const ProjectSurvey = ({
                     )}
                   </div>
                 </form>
-              </DialogPanel>
-            </TransitionChild>
+              </Dialog.Panel>
+            </Transition.Child>
           </div>
         </div>
       </Dialog>