WIP: Configure additional eslint rules (#68)

* add eslint-config-prettier plugin * extend and add eslint rules * add command to lint fix * remove sort-imports rule * lint files
TeamPetPoison · Oct 7, 2023 · 9a023b8 · 9a023b8
1 parent 0d445fe
commit 9a023b8
Show file tree

Hide file tree

Showing 20 changed files with 84 additions and 43 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,7 @@
 {
   "devDependencies": {
     "eslint": "^8.40.0",
+    "eslint-config-prettier": "^9.0.0",
     "prettier": "^3.0.3",
     "typescript": "^5.2.2"
   },

diff --git a/packages/client/.eslintrc.json b/packages/client/.eslintrc.json
@@ -1,3 +1,16 @@
 {
-  "extends": "next/core-web-vitals"
+  "env": {
+    "es2022": true
+  },
+  "extends": ["eslint:recommended", "next", "next/core-web-vitals", "prettier"],
+  "rules": {
+    "prefer-template": "error",
+    "sort-keys": [
+      "error",
+      "asc",
+      {
+        "allowLineSeparatedGroups": true
+      }
+    ]
+  }
 }
diff --git a/packages/client/lib/components/BottomNav/BottomNav.jsx b/packages/client/lib/components/BottomNav/BottomNav.jsx
@@ -5,20 +5,20 @@ import BottomNavItem from './BottomNavItem.jsx';
 
 const BOTTOM_NAV_ITEMS = [
   {
-    name: 'Home',
     icon: <SVGIcon name="homeIcon" />,
+    name: 'Home',
   },
   {
-    name: 'Search',
     icon: <SVGIcon name="magnifyingGlassIcon" />,
+    name: 'Search',
   },
   {
-    name: 'Layers',
     icon: <SVGIcon name="mapPinIcon" />,
+    name: 'Layers',
   },
   {
-    name: 'Profile',
     icon: <SVGIcon name="userIcon" />,
+    name: 'Profile',
   },
 ];
 

diff --git a/packages/client/lib/components/Map.jsx b/packages/client/lib/components/Map.jsx
@@ -68,7 +68,7 @@ const SetViewOnUserLocation = () => {
       (error) => {
         console.error(error);
       },
-      { enableHighAccuracy: true, timeout: 10000, maximumAge: Infinity },
+      { enableHighAccuracy: true, maximumAge: Infinity, timeout: 10000 },
     );
   }, [map, setLocation]);
 

diff --git a/packages/client/lib/components/ReportForm/FormViews/LocationView.jsx b/packages/client/lib/components/ReportForm/FormViews/LocationView.jsx
@@ -1,6 +1,6 @@
-import { latLngToString } from '@/lib/helpers/helpers';
-import useMainStore from '@/store/store';
+import { latLngToString } from '../../../../lib/helpers/helpers';
 import { useFormStore, useFormStoreActions } from '../../../../store/formStore';
+import useMainStore from '../../../../store/store';
 import { SVGIcon } from '../../common/icons/SVGIcon';
 
 const LocationView = () => {

diff --git a/packages/client/lib/components/ReportForm/FormViews/SummaryView.jsx b/packages/client/lib/components/ReportForm/FormViews/SummaryView.jsx
@@ -1,6 +1,6 @@
-import { latLngToString } from '@/lib/helpers/helpers';
 import Image from 'next/image';
 import { useFormStore } from '../../../../store/formStore';
+import { latLngToString } from '../../../helpers/helpers';
 
 const SummaryView = () => {
   const category = useFormStore((state) => state.category);

diff --git a/packages/client/lib/components/ReportForm/FormViews/UpdateView.jsx b/packages/client/lib/components/ReportForm/FormViews/UpdateView.jsx
@@ -1,7 +1,7 @@
-import useMainStore from '@/store/store';
 import { useEffect, useRef } from 'react';
 import { MapContainer, Marker, TileLayer, useMap } from 'react-leaflet';
 import { useFormStore, useFormStoreActions } from '../../../../store/formStore';
+import useMainStore from '../../../../store/store';
 import LocationSearch from '../../LocationSearch';
 import { SVGIcon } from '../../common/icons/SVGIcon';
 

diff --git a/packages/client/lib/components/common/Button.jsx b/packages/client/lib/components/common/Button.jsx
@@ -1,9 +1,9 @@
 import { SVGIcon } from './icons/SVGIcon';
 
 const BUTTON_TYPE_CLASSES_MAP = {
+  negative: 'bg-negative text-background',
   neutral: 'bg-background text-foreground',
   positive: 'bg-positive text-background',
-  negative: 'bg-negative text-background',
 };
 
 export const Button = ({

diff --git a/packages/client/lib/firebase/firebaseConfig.js b/packages/client/lib/firebase/firebaseConfig.js
@@ -9,12 +9,12 @@ import { getFirestore } from 'firebase/firestore';
 // For Firebase JS SDK v7.20.0 and later, measurementId is optional
 const firebaseConfig = {
   apiKey: process.env.NEXT_PUBLIC_API_KEY,
+  appId: process.env.NEXT_PUBLIC_APP_ID,
   authDomain: process.env.NEXT_PUBLIC_AUTH_DOMAIN,
+  measurementId: process.env.NEXT_PUBLIC_MEASUREMENT_ID,
+  messagingSenderId: process.env.NEXT_PUBLIC_MESSAGING_SENDER_ID,
   projectId: process.env.NEXT_PUBLIC_PROJECT_ID,
   storageBucket: process.env.NEXT_PUBLIC_STORAGE_BUCKET,
-  messagingSenderId: process.env.NEXT_PUBLIC_MESSAGING_SENDER_ID,
-  appId: process.env.NEXT_PUBLIC_APP_ID,
-  measurementId: process.env.NEXT_PUBLIC_MEASUREMENT_ID,
 };
 
 // Initialize Firebase

diff --git a/packages/client/lib/hooks/useResizeWindow.jsx b/packages/client/lib/hooks/useResizeWindow.jsx
@@ -14,8 +14,8 @@ export const useResizeWindow = () => {
     const updateWindowDimensions = () => {
       const innerHeight = window.innerHeight;
       setWindowDimensions({
-        width: window.innerWidth,
         height: innerHeight,
+        width: window.innerWidth,
       });
 
       // set css variable for mobile browsers

diff --git a/packages/client/next.config.js b/packages/client/next.config.js
@@ -3,10 +3,10 @@ const CopyPlugin = require('copy-webpack-plugin');
 
 /** @type {import('next').NextConfig} */
 const nextConfig = {
-  reactStrictMode: true,
   images: {
     unoptimized: true, // TODO: remove this when we have a proper image pipeline
   },
+  reactStrictMode: true,
   webpack: (config) => {
     config.plugins.push(
       new CopyPlugin({

diff --git a/packages/client/package.json b/packages/client/package.json
@@ -30,6 +30,7 @@
     "dev": "next dev",
     "format": "prettier --write \"**/*.{js,jsx,ts,tsx,json,css,scss,md}\"",
     "lint": "next lint",
+    "lint:fix": "next lint --fix",
     "prettier:check": "prettier --check \"**/*.{js,jsx,ts,tsx,json,css,scss,md}\"",
     "start": "next start"
   },

diff --git a/packages/client/pages/_app.tsx b/packages/client/pages/_app.tsx
@@ -1,7 +1,7 @@
-import { useResizeWindow } from '@/lib/hooks/useResizeWindow';
-import '@/styles/globals.css';
 import 'leaflet/dist/leaflet.css';
 import type { AppProps } from 'next/app';
+import { useResizeWindow } from '../lib/hooks/useResizeWindow';
+import '../styles/globals.css';
 
 export default function App({ Component, pageProps }: AppProps) {
   useResizeWindow();

diff --git a/packages/client/pages/_document.tsx b/packages/client/pages/_document.tsx
@@ -1,4 +1,4 @@
-import { Html, Head, Main, NextScript } from 'next/document';
+import { Head, Html, Main, NextScript } from 'next/document';
 
 export default function Document() {
   return (

diff --git a/packages/client/pages/index.tsx b/packages/client/pages/index.tsx
@@ -1,10 +1,10 @@
-import LocationSearch from '@/lib/components/LocationSearch';
-import { useMainStoreActions } from '@/store/store';
 import dynamic from 'next/dynamic';
 import Head from 'next/head';
 import BottomNav from '../lib/components/BottomNav/BottomNav';
+import LocationSearch from '../lib/components/LocationSearch';
 import ReportForm from '../lib/components/ReportForm/ReportForm';
 import { useFormStore } from '../store/formStore';
+import { useMainStoreActions } from '../store/store';
 
 const MapWithNoSSR = dynamic(() => import('../lib/components/Map'), {
   ssr: false,

diff --git a/packages/client/store/formStore.js b/packages/client/store/formStore.js
@@ -1,5 +1,5 @@
-import { normalizeLatLng } from '@/lib/helpers/helpers';
 import { create } from 'zustand';
+import { normalizeLatLng } from '../lib/helpers/helpers';
 
 const initialState = {
   category: '',
@@ -15,18 +15,18 @@ const initialState = {
 export const useFormStore = create((set, get) => ({
   ...initialState,
   actions: {
-    resetForm: () => set(initialState),
     getFormData: () => {
       const { category, description, location, photos, title } = get();
       return {
-        id: Date.now(),
         category: category,
-        photos: photos,
-        title: title,
         description: description,
+        id: Date.now(),
         location: location,
+        photos: photos,
+        title: title,
       };
     },
+    resetForm: () => set(initialState),
     setCategory: (str) => set({ category: str }),
     setDescription: (str) => set({ description: str }),
     setError: (bool) => set({ error: bool }),

diff --git a/packages/client/store/store.js b/packages/client/store/store.js
@@ -2,25 +2,35 @@
 import { create } from 'zustand';
 import { normalizeLatLng } from '../lib/helpers/helpers.js';
 
+const initialState = {
+  geoData: { lat: -8.7445, lng: 115.182 },
+  markers: [],
+  rootDimensions: {
+    height: 0,
+  },
+  width: 0,
+  windowDimensions: {
+    height: 0,
+    width: 0,
+  },
+};
+
 /**
  * main global zustand store
  * - stores the state
  */
 const useMainStore = create((set) => ({
-  geoData: { lat: -8.7445, lng: 115.182 },
-  markers: [],
-  rootDimensions: { width: 0, height: 0 },
-  windowDimensions: { width: 0, height: 0 },
+  ...initialState,
   actions: {
     setGeoData: ({ lat, lng }) => {
       set({ geoData: normalizeLatLng({ lat, lng }) });
     },
     setMarkers: (object) =>
       set((state) => ({ markers: [...state.markers, object] })),
-    setRootDimensions: ({ width, height }) =>
-      set({ rootDimensions: { width, height } }),
-    setWindowDimensions: ({ width, height }) =>
-      set({ windowDimensions: { width, height } }),
+    setRootDimensions: ({ height, width }) =>
+      set({ rootDimensions: { height, width } }),
+    setWindowDimensions: ({ height, width }) =>
+      set({ windowDimensions: { height, width } }),
   },
 }));
 

diff --git a/packages/client/tailwind.config.js b/packages/client/tailwind.config.js
@@ -8,6 +8,7 @@ module.exports = {
     // Or if using `src` directory:
     './src/**/*.{js,ts,jsx,tsx}',
   ],
+  plugins: [],
   theme: {
     /**
      * Colors are defined in global.css
@@ -28,13 +29,12 @@ module.exports = {
     },
     extend: {
       // override the default utility class for `screen`
-      minHeight: {
+      height: {
         screen: 'var(--window-height)',
       },
-      height: {
+      minHeight: {
         screen: 'var(--window-height)',
       },
     },
   },
-  plugins: [],
 };
diff --git a/packages/client/tsconfig.json b/packages/client/tsconfig.json
@@ -19,11 +19,11 @@
     "sourceMap": true,
     "strict": true,
     "strictNullChecks": false, // TODO make "true" once all files are converted to TS
-    "target": "es5",
-    "paths": {
-      "@/*": ["./*"]
-    }
+    "target": "es5"
+    // "paths": {
+    //   "@/*": ["./*"]
+    // }
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "store/formStore.js"],
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
   "exclude": ["node_modules"]
 }