fix linting errors

.babelrc

@@ -0,0 +1,4 @@
+{
+  "presets": ["next/babel"],
+  "plugins": ["jotai/babel/plugin-react-refresh"]
+}

.eslintrc.cjs

@@ -0,0 +1,12 @@
+module.exports = {
+  root: true,
+  env: { browser: true, es2020: true },
+  extends: ["eslint:recommended", "plugin:@typescript-eslint/recommended", "plugin:react-hooks/recommended"],
+  ignorePatterns: ["dist", ".eslintrc.cjs"],
+  parser: "@typescript-eslint/parser",
+  plugins: ["react-refresh"],
+  rules: {
+    "@typescript-eslint/no-explicit-any": ["off"],
+    "react-refresh/only-export-components": ["warn", { allowConstantExport: true }],
+  },
+};

.gitattributes

@@ -0,0 +1,2 @@
+# Auto detect text files and perform LF normalization
+* text=auto

package.json

@@ -39,12 +39,12 @@
     "@typescript-eslint/parser": "^6.14.0",
     "@vitejs/plugin-react": "^4.2.1",
     "babel-plugin-macros": "^3.1.0",
-    "eslint": "^9.0.0",
-    "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-react-refresh": "^0.4.6",
+    "eslint": "^8.56.0",
+    "eslint-plugin-react-hooks": "^4.6.2",
+    "eslint-plugin-react-refresh": "^0.4.7",
     "sass": "^1.74.1",
-    "tsx": "^4.7.2",
-    "typescript": "^5.4.4",
+    "tsx": "^4.16.0",
+    "typescript": "^5.5.2",
     "vite": "^5.2.8"
   }
 }

src/app.tsx

@@ -52,6 +52,7 @@ const App = () => {
   useEffect(() => {
     setOrganizations();
   }, []);
+
   // Watch for organization changes
   useEffect(() => {
     if (!find(organizations, { id: organizationId })) {

src/atoms.tsx

@@ -177,8 +177,8 @@ export const invoiceAtom = atom(
   async (get, set, newValues: any) => {
     const invoiceId = get(invoiceIdAtom);
 
-    let invoice = omit(newValues, "lineItems");
-    let lineItems = newValues.lineItems;
+    const invoice = omit(newValues, "lineItems");
+    const lineItems = newValues.lineItems;
 
     if (!invoiceId) {
       // Insert

src/components/invoices/pdf.tsx

@@ -80,11 +80,11 @@ const styles = StyleSheet.create({
   /* Table */
   table: {
     // TODO: Check if can be removed
-    // @ts-ignore
+    // @ts-expect-error - "table" is not a valid display value
     display: "table",
     width: "auto",
     // TODO: Check if can be removed
-    // @ts-ignore
+    // @ts-expect-error - "none" is not a valid border style
     borderStyle: "none",
   },
   tableRow: {
@@ -164,6 +164,7 @@ const InvoicePDF = ({
 }) => {
   // TODO: Check if taxRates are needed
   if (taxRates) {
+    console.log("taxRates", taxRates);
   }
 
   return (

src/components/invoices/state-select.tsx

@@ -55,7 +55,7 @@ const InvoiceStateSelect = ({ invoice }: { invoice: any }) => {
         },
       }}
     >
-      {/* @ts-ignore */}
+      {/* @ts-expect-error - TODO: stateColor ts definition */}
       <Tag color={stateColor[invoice.state]} style={{ marginInlineEnd: 0, cursor: "pointer" }}>
         <Space size={4} style={{ fontSize: 12 }}>
           {capitalize(invoice.state)}

src/layouts/base.tsx

@@ -31,7 +31,7 @@ export default function BaseLayout() {
   const { i18n } = useLingui();
   const navigate = useNavigate();
 
-  const [_messageApi, contextHolder] = message.useMessage();
+  const [, contextHolder] = message.useMessage();
   const {
     token: { colorBgContainer, borderRadiusLG },
   } = theme.useToken();

src/routes/clients.tsx

@@ -17,7 +17,7 @@ const Clients = () => {
   const location = useLocation();
   const clients = useAtomValue(clientsAtom);
   const setClients = useSetAtom(setClientsAtom);
-  const [_search, setSearch] = useAtom(searchAtom);
+  const [, setSearch] = useAtom(searchAtom);
 
   useEffect(() => {
     if (location.pathname === "/clients") {

src/routes/invoices/details.tsx

@@ -77,7 +77,7 @@ const InvoiceDetails: React.FC = () => {
   const setClients = useSetAtom(setClientsAtom);
   const taxRates = useAtomValue(taxRatesAtom);
   const setTaxRates = useSetAtom(setTaxRatesAtom);
-  const [_submitting, setSubmitting] = useState(false);
+  const [, setSubmitting] = useState(false);
 
   const isNew = id === "new";
 
@@ -537,7 +537,7 @@ const InvoiceDetails: React.FC = () => {
                     </Col>
                   </Row>
                 </Footer>,
-                // @ts-ignore
+                // @ts-expect-error - Footer can be null
                 document.getElementById("footer")
               )}
           </Form>

src/routes/invoices/index.tsx

@@ -40,7 +40,7 @@ const Invoices = () => {
   const organization = useAtomValue(organizationAtom);
   const invoices = useAtomValue(invoicesAtom);
   const setInvoices = useSetAtom(setInvoicesAtom);
-  const [_search, setSearch] = useAtom(searchAtom);
+  const [, setSearch] = useAtom(searchAtom);
 
   useEffect(() => {
     if (location.pathname === "/invoices") {

src/routes/invoices/preview.tsx

@@ -197,7 +197,7 @@ const InvoicePreview: React.FC = () => {
                   </Col>
                 </Row>
               </Footer>,
-              // @ts-ignore
+              // @ts-expect-error - Footer can be null
               document.getElementById("footer")
             )}
         </Col>

src/routes/settings/invoice.tsx

@@ -1,4 +1,3 @@
-import { useEffect, useState } from "react";
 import { Button, Col, Form, Input, InputNumber, Select, Space, Typography, Row, Upload } from "antd";
 import { atom, useAtom, useSetAtom } from "jotai";
 import { FileTextOutlined, PictureOutlined, UploadOutlined } from "@ant-design/icons";
@@ -12,7 +11,6 @@ const { Option } = Select;
 
 import { organizationAtom, setOrganizationsAtom } from "src/atoms";
 import { currencies, getCurrencySymbol } from "src/utils/currencies";
-import { set } from "lodash";
 
 const submittingAtom = atom(false);
 
@@ -22,8 +20,6 @@ function SettingsInvoice() {
   const [organization, setOrganization] = useAtom(organizationAtom);
   const [submitting, setSubmitting] = useAtom(submittingAtom);
 
-  const [logo, setLogo] = useState(null);
-
   const onSubmit = async (values: object) => {
     setSubmitting(true);
     setOrganization(values);

src/utils/currencies.tsx

@@ -1,6 +1,6 @@
 import isNumber from "lodash/isNumber";
 
-// @ts-ignore
+// @ts-expect-error - Intl supportedValuesOf support?
 export const currencies = Intl.supportedValuesOf("currency");
 
 export const getCurrencySymbol = (locale: string, currency: string) => {