Merge pull request #16 from NIAEFEUP/feature/pre-commit-hook

Feature: added pre commit hook to format and lint the code

website/.husky/pre-commit

@@ -0,0 +1,3 @@
+cd website
+pnpm lint-staged
+pnpm run typecheck

website/inertia/components/ui/location-input.tsx

@@ -10,11 +10,7 @@ import {
   CommandInput,
   CommandItem,
 } from '~/components/ui/command'
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from '~/components/ui/popover'
+import { Popover, PopoverContent, PopoverTrigger } from '~/components/ui/popover'
 import { cn } from '~/lib/utils'
 
 import countries from '~/data/countries.json'
@@ -72,14 +68,8 @@ interface LocationSelectorProps {
   onStateChange?: (state: StateProps | null) => void
 }
 
-const LocationSelector = ({
-  disabled,
-  onCountryChange,
-  onStateChange,
-}: LocationSelectorProps) => {
-  const [selectedCountry, setSelectedCountry] = useState<CountryProps | null>(
-    null,
-  )
+const LocationSelector = ({ disabled, onCountryChange, onStateChange }: LocationSelectorProps) => {
+  const [selectedCountry, setSelectedCountry] = useState<CountryProps | null>(null)
   const [selectedState, setSelectedState] = useState<StateProps | null>(null)
   const [openCountryDropdown, setOpenCountryDropdown] = useState(false)
   const [openStateDropdown, setOpenStateDropdown] = useState(false)
@@ -89,9 +79,7 @@ const LocationSelector = ({
   const statesData = states as StateProps[]
 
   // Filter states for selected country
-  const availableStates = statesData.filter(
-    (state) => state.country_id === selectedCountry?.id,
-  )
+  const availableStates = statesData.filter((state) => state.country_id === selectedCountry?.id)
 
   const handleCountrySelect = (country: CountryProps | null) => {
     setSelectedCountry(country)
@@ -152,9 +140,7 @@ const LocationSelector = ({
                       <Check
                         className={cn(
                           'h-4 w-4',
-                          selectedCountry?.id === country.id
-                            ? 'opacity-100'
-                            : 'opacity-0',
+                          selectedCountry?.id === country.id ? 'opacity-100' : 'opacity-0'
                         )}
                       />
                     </CommandItem>
@@ -178,11 +164,7 @@ const LocationSelector = ({
               disabled={!selectedCountry}
               className="w-full justify-between"
             >
-              {selectedState ? (
-                <span>{selectedState.name}</span>
-              ) : (
-                <span>Select State...</span>
-              )}
+              {selectedState ? <span>{selectedState.name}</span> : <span>Select State...</span>}
               <ChevronsUpDown className="h-4 w-4 shrink-0 opacity-50" />
             </Button>
           </PopoverTrigger>
@@ -207,9 +189,7 @@ const LocationSelector = ({
                         <Check
                           className={cn(
                             'h-4 w-4',
-                            selectedState?.id === state.id
-                              ? 'opacity-100'
-                              : 'opacity-0',
+                            selectedState?.id === state.id ? 'opacity-100' : 'opacity-0'
                           )}
                         />
                       </CommandItem>

website/inertia/components/ui/phone-input.tsx

@@ -1,82 +1,70 @@
-import * as React from "react";
-import { CheckIcon, ChevronsUpDown } from "lucide-react";
-import * as RPNInput from "react-phone-number-input";
-import flags from "react-phone-number-input/flags";
+import * as React from 'react'
+import { CheckIcon, ChevronsUpDown } from 'lucide-react'
+import * as RPNInput from 'react-phone-number-input'
+import flags from 'react-phone-number-input/flags'
 
-import { Button } from "~/components/ui/button";
+import { Button } from '~/components/ui/button'
 import {
   Command,
   CommandEmpty,
   CommandGroup,
   CommandInput,
   CommandItem,
   CommandList,
-} from "~/components/ui/command";
-import { Input } from "~/components/ui/input";
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "~/components/ui/popover";
-import { ScrollArea } from "~/components/ui/scroll-area";
-import { cn } from "~/lib/utils";
+} from '~/components/ui/command'
+import { Input } from '~/components/ui/input'
+import { Popover, PopoverContent, PopoverTrigger } from '~/components/ui/popover'
+import { ScrollArea } from '~/components/ui/scroll-area'
+import { cn } from '~/lib/utils'
 
-type PhoneInputProps = Omit<
-  React.ComponentProps<"input">,
-  "onChange" | "value" | "ref"
-> &
-  Omit<RPNInput.Props<typeof RPNInput.default>, "onChange"> & {
-    onChange?: (value: RPNInput.Value) => void;
-  };
+type PhoneInputProps = Omit<React.ComponentProps<'input'>, 'onChange' | 'value' | 'ref'> &
+  Omit<RPNInput.Props<typeof RPNInput.default>, 'onChange'> & {
+    onChange?: (value: RPNInput.Value) => void
+  }
 
-const PhoneInput: React.ForwardRefExoticComponent<PhoneInputProps> =
-  React.forwardRef<React.ElementRef<typeof RPNInput.default>, PhoneInputProps>(
-    ({ className, onChange, ...props }, ref) => {
-      return (
-        <RPNInput.default
-          ref={ref}
-          className={cn("flex", className)}
-          flagComponent={FlagComponent}
-          countrySelectComponent={CountrySelect}
-          inputComponent={InputComponent}
-          smartCaret={false}
-          /**
-           * Handles the onChange event.
-           *
-           * react-phone-number-input might trigger the onChange event as undefined
-           * when a valid phone number is not entered. To prevent this,
-           * the value is coerced to an empty string.
-           *
-           * @param {E164Number | undefined} value - The entered value
-           */
-          onChange={(value) => onChange?.(value || ("" as RPNInput.Value))}
-          {...props}
-        />
-      );
-    },
-  );
-PhoneInput.displayName = "PhoneInput";
+const PhoneInput: React.ForwardRefExoticComponent<PhoneInputProps> = React.forwardRef<
+  React.ElementRef<typeof RPNInput.default>,
+  PhoneInputProps
+>(({ className, onChange, ...props }, ref) => {
+  return (
+    <RPNInput.default
+      ref={ref}
+      className={cn('flex', className)}
+      flagComponent={FlagComponent}
+      countrySelectComponent={CountrySelect}
+      inputComponent={InputComponent}
+      smartCaret={false}
+      /**
+       * Handles the onChange event.
+       *
+       * react-phone-number-input might trigger the onChange event as undefined
+       * when a valid phone number is not entered. To prevent this,
+       * the value is coerced to an empty string.
+       *
+       * @param {E164Number | undefined} value - The entered value
+       */
+      onChange={(value) => onChange?.(value || ('' as RPNInput.Value))}
+      {...props}
+    />
+  )
+})
+PhoneInput.displayName = 'PhoneInput'
 
-const InputComponent = React.forwardRef<
-  HTMLInputElement,
-  React.ComponentProps<"input">
->(({ className, ...props }, ref) => (
-  <Input
-    className={cn("rounded-e-lg rounded-s-none", className)}
-    {...props}
-    ref={ref}
-  />
-));
-InputComponent.displayName = "InputComponent";
+const InputComponent = React.forwardRef<HTMLInputElement, React.ComponentProps<'input'>>(
+  ({ className, ...props }, ref) => (
+    <Input className={cn('rounded-e-lg rounded-s-none', className)} {...props} ref={ref} />
+  )
+)
+InputComponent.displayName = 'InputComponent'
 
-type CountryEntry = { label: string; value: RPNInput.Country | undefined };
+type CountryEntry = { label: string; value: RPNInput.Country | undefined }
 
 type CountrySelectProps = {
-  disabled?: boolean;
-  value: RPNInput.Country;
-  options: CountryEntry[];
-  onChange: (country: RPNInput.Country) => void;
-};
+  disabled?: boolean
+  value: RPNInput.Country
+  options: CountryEntry[]
+  onChange: (country: RPNInput.Country) => void
+}
 
 const CountrySelect = ({
   disabled,
@@ -93,15 +81,9 @@ const CountrySelect = ({
           className="flex gap-1 rounded-e-none rounded-s-lg border-r-0 px-3 focus:z-10"
           disabled={disabled}
         >
-          <FlagComponent
-            country={selectedCountry}
-            countryName={selectedCountry}
-          />
+          <FlagComponent country={selectedCountry} countryName={selectedCountry} />
           <ChevronsUpDown
-            className={cn(
-              "-mr-2 size-4 opacity-50",
-              disabled ? "hidden" : "opacity-100",
-            )}
+            className={cn('-mr-2 size-4 opacity-50', disabled ? 'hidden' : 'opacity-100')}
           />
         </Button>
       </PopoverTrigger>
@@ -121,20 +103,20 @@ const CountrySelect = ({
                       selectedCountry={selectedCountry}
                       onChange={onChange}
                     />
-                  ) : null,
+                  ) : null
                 )}
               </CommandGroup>
             </ScrollArea>
           </CommandList>
         </Command>
       </PopoverContent>
     </Popover>
-  );
-};
+  )
+}
 
 interface CountrySelectOptionProps extends RPNInput.FlagProps {
-  selectedCountry: RPNInput.Country;
-  onChange: (country: RPNInput.Country) => void;
+  selectedCountry: RPNInput.Country
+  onChange: (country: RPNInput.Country) => void
 }
 
 const CountrySelectOption = ({
@@ -149,20 +131,20 @@ const CountrySelectOption = ({
       <span className="flex-1 text-sm">{countryName}</span>
       <span className="text-sm text-foreground/50">{`+${RPNInput.getCountryCallingCode(country)}`}</span>
       <CheckIcon
-        className={`ml-auto size-4 ${country === selectedCountry ? "opacity-100" : "opacity-0"}`}
+        className={`ml-auto size-4 ${country === selectedCountry ? 'opacity-100' : 'opacity-0'}`}
       />
     </CommandItem>
-  );
-};
+  )
+}
 
 const FlagComponent = ({ country, countryName }: RPNInput.FlagProps) => {
-  const Flag = flags[country];
+  const Flag = flags[country]
 
   return (
     <span className="flex h-4 w-6 overflow-hidden rounded-sm bg-foreground/20 [&_svg]:size-full">
       {Flag && <Flag title={countryName} />}
     </span>
-  );
-};
+  )
+}
 
-export { PhoneInput };
+export { PhoneInput }