upgraded eslint and prettier

Vizzuality · Jan 3, 2024 · a9137cb · a9137cb
1 parent e040a49
commit a9137cb
Show file tree

Hide file tree

Showing 151 changed files with 697 additions and 602 deletions.
diff --git a/client/.eslintrc.js b/client/.eslintrc.js
@@ -3,10 +3,16 @@ module.exports = {
   extends: [
     'next/core-web-vitals',
     'plugin:@typescript-eslint/recommended',
-    'plugin:prettier/recommended',
     'plugin:import/recommended',
     'plugin:import/typescript',
+    'plugin:prettier/recommended',
   ],
+  parser: '@typescript-eslint/parser',
+  parserOptions: {
+    tsconfigRootDir: __dirname,
+    project: ['./tsconfig.eslint.json'],
+  },
+  plugins: ['@typescript-eslint', 'prettier'],
   settings: {
     'import/resolver': {
       typescript: true,

diff --git a/client/.prettierrc.cjs b/client/.prettierrc.cjs
@@ -0,0 +1,10 @@
+/** @type {import("prettier").Options} */
+module.exports = {
+  semi: true,
+  tabWidth: 2,
+  printWidth: 100,
+  singleQuote: true,
+  trailingComma: 'all',
+  editorconfig: true,
+  plugins: ['prettier-plugin-tailwindcss'],
+};
diff --git a/client/.prettierrc.json b/client/.prettierrc.json
diff --git a/client/next.config.js b/client/next.config.js
@@ -4,9 +4,6 @@ const nextConfig = {
   // ! the current approach we follow to handle layers on the map does not work with strict mode enabled,
   // ! do not enable it unless you know what you are doing or know the issue is fixed.
   reactStrictMode: false,
-  eslint: {
-    dirs: ['src'],
-  },
   output: 'standalone',
   redirects() {
     return [

diff --git a/client/package.json b/client/package.json
@@ -31,7 +31,7 @@
     "@headlessui/react": "v1.7.17",
     "@heroicons/react": "v1.0.6",
     "@hookform/resolvers": "2.8.8",
-    "@json2csv/plainjs": "^6.1.3",
+    "@json2csv/plainjs": "7.0.4",
     "@loaders.gl/core": "3.3.1",
     "@luma.gl/constants": "8.5.18",
     "@reduxjs/toolkit": "1.8.2",
@@ -88,14 +88,15 @@
     "cypress": "13.2.0",
     "eslint": "8.23.1",
     "eslint-config-next": "13.5.5",
-    "eslint-config-prettier": "8.6.0",
+    "eslint-config-prettier": "^9.1.0",
     "eslint-import-resolver-typescript": "3.6.1",
     "eslint-plugin-import": "^2.26.0",
-    "eslint-plugin-prettier": "4.2.1",
+    "eslint-plugin-prettier": "^5.1.2",
     "istanbul-reports": "3.0.0",
     "nyc": "15.1.0",
     "nyc-report-lcov-absolute": "1.0.0",
-    "prettier": "2.8.3",
+    "prettier": "^3.1.1",
+    "prettier-plugin-tailwindcss": "^0.5.10",
     "start-server-and-test": "1.14.0",
     "typescript": "5.2.2",
     "webpack": "5"

diff --git a/client/src/components/accordion/component.tsx b/client/src/components/accordion/component.tsx
@@ -45,12 +45,12 @@ const AccordionEntry = ({ header, children, expanded, onExpandedChange }: Accord
       })}
     >
       <div
-        className="flex flex-row gap-2 p-2 cursor-pointer place-items-start"
+        className="flex cursor-pointer flex-row place-items-start gap-2 p-2"
         onClick={toggleExpand}
       >
         <div className="h-fit">
           <ChevronRightIcon
-            className={classNames('w-5 h-5 text-gray-500 my-auto', {
+            className={classNames('my-auto h-5 w-5 text-gray-500', {
               'rotate-90': localIsExpanded,
             })}
           />

diff --git a/client/src/components/avatar/component.tsx b/client/src/components/avatar/component.tsx
@@ -6,7 +6,7 @@ import type { ImageProps } from 'next/image';
 export type AvatarProps = ImageProps;
 
 export const Avatar: React.FC<AvatarProps> = ({ className, ...props }: AvatarProps) => (
-  <div className={cx('relative h-10 w-10 rounded-full inline-block overflow-hidden', className)}>
+  <div className={cx('relative inline-block h-10 w-10 overflow-hidden rounded-full', className)}>
     <Image alt={props.alt || 'Profile avatar'} width={40} height={40} {...props} priority />
   </div>
 );

diff --git a/client/src/components/back-link/component.tsx b/client/src/components/back-link/component.tsx
@@ -11,11 +11,11 @@ const BackLink: FC<AnchorHTMLAttributes<HTMLAnchorElement>> = forwardRef<
 >(({ children, className, href, ...props }, ref) => (
   <Link
     href={href}
-    className={classNames('flex text-navy-400 text-sm', className)}
+    className={classNames('flex text-sm text-navy-400', className)}
     ref={ref}
     {...props}
   >
-    <ArrowLeftIcon className="inline-block w-5 h-5 mr-4" />
+    <ArrowLeftIcon className="mr-4 inline-block h-5 w-5" />
     {children}
   </Link>
 ));

diff --git a/client/src/components/badge/component.tsx b/client/src/components/badge/component.tsx
@@ -26,7 +26,7 @@ const Badge: React.FC<BadgeProps> = ({
   return (
     <div
       className={classNames(
-        'flex items-center overflow-hidden shadow-sm px-2 py-px gap-x-0.5 max-w-fit min-w-fit',
+        'flex min-w-fit max-w-fit items-center gap-x-0.5 overflow-hidden px-2 py-px shadow-sm',
         className,
         THEME_CLASSNAMES[theme]?.wrapper,
         removable && 'pr-1',
@@ -38,7 +38,7 @@ const Badge: React.FC<BadgeProps> = ({
           type="button"
           className={classNames(
             THEME_CLASSNAMES[theme].closeIcon,
-            'flex-shrink-0 h-4 w-4 rounded-full inline-flex items-center justify-center focus:outline-none',
+            'inline-flex h-4 w-4 flex-shrink-0 items-center justify-center rounded-full focus:outline-none',
           )}
           onClick={handleClick}
           aria-label="Remove"

diff --git a/client/src/components/button-group/component.tsx b/client/src/components/button-group/component.tsx
@@ -1,5 +1,5 @@
 const ButtonGroup: React.FC<React.PropsWithChildren> = ({ children }) => (
-  <div className="relative flex bg-white border border-gray-200 rounded-md shadow-sm">
+  <div className="relative flex rounded-md border border-gray-200 bg-white shadow-sm">
     {children}
   </div>
 );

diff --git a/client/src/components/button/component.tsx b/client/src/components/button/component.tsx
@@ -135,8 +135,8 @@ const ButtonTemplate: React.FC<AnchorButtonProps> = ({ danger, icon, loading, si
     {loading && (
       <Loading
         className={classNames('mr-2', {
-          'w-3 h-3': size === 'xs',
-          'w-4 h-4': size !== 'xs',
+          'h-3 w-3': size === 'xs',
+          'h-4 w-4': size !== 'xs',
           'text-gray-900': variant === 'white' && !danger,
         })}
       />

diff --git a/client/src/components/callout/component.tsx b/client/src/components/callout/component.tsx
@@ -22,9 +22,9 @@ const Callout = ({ type, children }: React.PropsWithChildren<CalloutProps>) => {
   const Icon = ICONS_BY_TYPE[type];
   return (
     <div
-      className={classNames('flex flex-row rounded-md p-2 text-sm gap-2', TYPE_CLASSNAMES[type])}
+      className={classNames('flex flex-row gap-2 rounded-md p-2 text-sm', TYPE_CLASSNAMES[type])}
     >
-      <Icon className="w-5 h-5 flex-shrink-0" />
+      <Icon className="h-5 w-5 flex-shrink-0" />
       <div>{children}</div>
     </div>
   );

diff --git a/client/src/components/dialogs/delete/component.tsx b/client/src/components/dialogs/delete/component.tsx
@@ -27,11 +27,11 @@ export const DeleteDialog: FC<PropsWithChildren<DeleteDialogProps>> = ({
           leaveFrom="opacity-100"
           leaveTo="opacity-0"
         >
-          <div className="fixed inset-0 transition-opacity bg-gray-500 bg-opacity-75" />
+          <div className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
         </Transition.Child>
 
         <div className="fixed inset-0 z-10 overflow-y-auto">
-          <div className="flex items-end justify-center min-h-full p-4 text-center sm:items-center sm:p-0">
+          <div className="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
             <Transition.Child
               as={Fragment}
               enter="ease-out duration-300"
@@ -41,12 +41,12 @@ export const DeleteDialog: FC<PropsWithChildren<DeleteDialogProps>> = ({
               leaveFrom="opacity-100 translate-y-0 sm:scale-100"
               leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
             >
-              <Dialog.Panel className="relative px-4 pt-5 pb-4 overflow-hidden text-left transition-all transform bg-white rounded-lg shadow-xl sm:my-8 sm:w-full sm:max-w-lg sm:p-6">
+              <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-white px-4 pb-4 pt-5 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg sm:p-6">
                 <div className="sm:flex sm:items-start">
-                  <div className="flex items-center justify-center flex-shrink-0 mx-auto rounded-full w-14 h-14 bg-red-50 sm:mx-0">
-                    <ExclamationIcon className="w-6 h-6 text-red-400" aria-hidden="true" />
+                  <div className="mx-auto flex h-14 w-14 flex-shrink-0 items-center justify-center rounded-full bg-red-50 sm:mx-0">
+                    <ExclamationIcon className="h-6 w-6 text-red-400" aria-hidden="true" />
                   </div>
-                  <div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
+                  <div className="mt-3 text-center sm:ml-4 sm:mt-0 sm:text-left">
                     <Dialog.Title as="h3" className="text-lg font-medium leading-6 text-gray-900">
                       {title}
                     </Dialog.Title>
@@ -56,7 +56,7 @@ export const DeleteDialog: FC<PropsWithChildren<DeleteDialogProps>> = ({
                   </div>
                   {children}
                 </div>
-                <div className="flex justify-center mt-4 space-x-4 sm:justify-end sm:mt-4">
+                <div className="mt-4 flex justify-center space-x-4 sm:mt-4 sm:justify-end">
                   <Button type="button" variant="white" onClick={onClose}>
                     Cancel
                   </Button>

diff --git a/client/src/components/disclaimer/component.tsx b/client/src/components/disclaimer/component.tsx
@@ -49,21 +49,21 @@ const Disclaimer: React.FC<DisclaimerProps> = ({
     >
       <div
         className={classNames(
-          'p-6 mt-6 text-sm text-left rounded-md bg-white border',
+          'mt-6 rounded-md border bg-white p-6 text-left text-sm',
           WRAPPER_CLASS[variant],
         )}
       >
-        <div className="flex space-x-6 items-center">
+        <div className="flex items-center space-x-6">
           <div className="flex-none">
             {icon || (
               <div
                 className={classNames(
-                  'flex items-center justify-center rounded-full w-[72px] h-[72px]',
+                  'flex h-[72px] w-[72px] items-center justify-center rounded-full',
                   ICON_BG_CLASS[variant],
                 )}
               >
                 <ExclamationIcon
-                  className={classNames('w-8 h-8 text-orange-500', ICON_CLASS[variant])}
+                  className={classNames('h-8 w-8 text-orange-500', ICON_CLASS[variant])}
                 />
               </div>
             )}

diff --git a/client/src/components/dropdown/component.tsx b/client/src/components/dropdown/component.tsx
@@ -12,7 +12,7 @@ export const Button: React.FC<React.PropsWithChildren> = ({ children, ...props }
 
 export const Items: React.FC<React.PropsWithChildren> = ({ children, ...props }) => (
   <Menu.Items
-    className="absolute right-0 z-40 mt-2 origin-top-right bg-white rounded-md shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none"
+    className="absolute right-0 z-40 mt-2 origin-top-right rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none"
     {...props}
   >
     {children}

diff --git a/client/src/components/file-dropzone/component.tsx b/client/src/components/file-dropzone/component.tsx
@@ -36,7 +36,7 @@ const FileDropZone: React.FC<FileDropZoneProps> = ({ isUploading, ...dropZoneOpt
       <input {...getInputProps()} />
 
       <div className="space-y-1">
-        <div className="flex justify-center w-full mb-4">
+        <div className="mb-4 flex w-full justify-center">
           {isUploading ? (
             <Lottie animationData={uploaderAnimation} loop autoplay />
           ) : (

diff --git a/client/src/components/forms/checkbox/component.tsx b/client/src/components/forms/checkbox/component.tsx
@@ -11,7 +11,7 @@ const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
       <div className="flex items-center">
         <input
           className={classnames(
-            'border rounded text-sm focus:outline-none focus:ring-2 focus:ring-navy-400/20 focus:border-navy-400 px-0',
+            'rounded border px-0 text-sm focus:border-navy-400 focus:outline-none focus:ring-2 focus:ring-navy-400/20',
             props.disabled ? 'border-gray-200' : 'border-navy-400',
             !props.disabled && error ? 'border-red-400' : 'border-gray-200',
           )}
@@ -22,7 +22,7 @@ const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
         <label
           htmlFor={props.id}
           className={classnames(
-            'block ml-2 text-sm',
+            'ml-2 block text-sm',
             props.disabled ? 'text-gray-200' : 'text-gray-900',
           )}
         >

diff --git a/client/src/components/forms/input/component.tsx b/client/src/components/forms/input/component.tsx
@@ -11,7 +11,7 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
     <>
       <div className={classnames('relative rounded-md shadow-sm', className)}>
         {icon && (
-          <div className="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
+          <div className="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
             {cloneElement(icon, {
               className: classnames(
                 'w-4 h-4',
@@ -23,7 +23,7 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
         )}
         <input
           className={classnames(
-            'block w-full px-4 py-2.5 leading-5 rounded-md text-sm border placeholder:text-gray-500 focus:outline-none focus:ring-0',
+            'block w-full rounded-md border px-4 py-2.5 text-sm leading-5 placeholder:text-gray-500 focus:outline-none focus:ring-0',
             error ? 'border-red-400 focus:border-red-400' : 'border-gray-200 focus:border-navy-400',
             inputProps.disabled ? 'bg-gray-300/20 text-gray-300' : 'bg-white text-gray-900',
             {
@@ -39,16 +39,16 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
         {unit && (
           <div
             className={classnames(
-              'absolute inset-y-0 flex items-center pr-3 pointer-events-none',
+              'pointer-events-none absolute inset-y-0 flex items-center pr-3',
               error ? 'right-6' : 'right-0',
             )}
           >
             <span className="text-gray-500 sm:text-sm">{unit}</span>
           </div>
         )}
         {error && (
-          <div className="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none">
-            <ExclamationCircleIcon className="w-4 h-4 text-red-400" />
+          <div className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
+            <ExclamationCircleIcon className="h-4 w-4 text-red-400" />
           </div>
         )}
       </div>

diff --git a/client/src/components/forms/label/component.tsx b/client/src/components/forms/label/component.tsx
@@ -6,7 +6,7 @@ type LabelProps = React.LabelHTMLAttributes<HTMLLabelElement> & {
 
 const Label: React.FC<LabelProps> = ({ className, children, ...props }) => (
   <label
-    className={classnames('block text-sm font-medium text-gray-900 mb-1', className)}
+    className={classnames('mb-1 block text-sm font-medium text-gray-900', className)}
     {...props}
   >
     {children}

diff --git a/client/src/components/forms/radio/component.tsx b/client/src/components/forms/radio/component.tsx
@@ -11,7 +11,7 @@ const Radio = forwardRef<HTMLInputElement, RadioProps>(
       <div className="flex items-center">
         <input
           className={classnames(
-            'border rounded-full text-sm focus:outline-none focus:ring-2 focus:ring-navy-400/20 focus:border-navy-400 px-0',
+            'rounded-full border px-0 text-sm focus:border-navy-400 focus:outline-none focus:ring-2 focus:ring-navy-400/20',
             props.disabled ? 'border-gray-200' : 'border-navy-400',
             !props.disabled && error ? 'border-red-400' : 'border-gray-200',
           )}
@@ -22,7 +22,7 @@ const Radio = forwardRef<HTMLInputElement, RadioProps>(
         <label
           htmlFor={props.id}
           className={classnames(
-            'block ml-2 text-sm',
+            'ml-2 block text-sm',
             props.disabled ? 'text-gray-300' : 'text-gray-900',
           )}
         >

diff --git a/client/src/components/forms/range/component.tsx b/client/src/components/forms/range/component.tsx
@@ -33,7 +33,7 @@ const RangeSlider: React.FC<RangeSliderProps> = ({ min, max, step = 1, value, on
         renderTrack={({ props, children }) => (
           <div {...props} className="relative h-6 w-full">
             {children}
-            <div className="w-full h-0.5 flex flex-row top-1/2 relative -z-10">
+            <div className="relative top-1/2 -z-10 flex h-0.5 w-full flex-row">
               <div className="h-full bg-navy-400" style={{ width: `${fillPercentage}%` }} />
               <div className="h-full bg-gray-100" style={{ width: `${100 - fillPercentage}%` }} />
             </div>
@@ -43,19 +43,19 @@ const RangeSlider: React.FC<RangeSliderProps> = ({ min, max, step = 1, value, on
           <div
             {...props}
             className={classNames(
-              'relative h-4 w-4 rounded-full border-navy-400 border-2 text-center',
+              'relative h-4 w-4 rounded-full border-2 border-navy-400 text-center',
               {
                 'bg-white': !isDragged,
                 'bg-navy-400': isDragged,
               },
             )}
           >
             {isDragged && (
-              <div className="absolute top-2 -translate-y-full left-1/2 -translate-x-1/2">
-                <div className="min-w-fit text-white bg-black p-2 rounded-md text-xs whitespace-nowrap">
+              <div className="absolute left-1/2 top-2 -translate-x-1/2 -translate-y-full">
+                <div className="min-w-fit whitespace-nowrap rounded-md bg-black p-2 text-xs text-white">
                   {value} {unit}
                 </div>
-                <div className="bg-black w-4 h-4 relative left-1/2 -translate-x-1/2 bottom-3 rotate-45 rounded-sm" />
+                <div className="relative bottom-3 left-1/2 h-4 w-4 -translate-x-1/2 rotate-45 rounded-sm bg-black" />
               </div>
             )}
           </div>