Fixing up build errors

.eslintrc.js

@@ -1,28 +0,0 @@
-module.exports = {
-  extends: ["plugin:react/recommended", "plugin:@typescript-eslint/recommended", "plugin:prettier/recommended", "plugin:css-modules/recommended", "plugin:storybook/recommended", "plugin:storybook/recommended", "plugin:storybook/recommended", "plugin:storybook/recommended"],
-  parser: "@typescript-eslint/parser",
-  parserOptions: {
-    sourceType: "module",
-    ecmaVersion: 2020,
-    ecmaFeatures: {
-      jsx: true // Allows for the parsing of JSX
-    }
-  },
-
-  plugins: ["@typescript-eslint", "css-modules"],
-  settings: {
-    "import/resolver": {
-      node: {
-        extensions: [".js", ".jsx", ".ts", ".tsx"]
-      }
-    },
-    react: {
-      version: "detect" // Tells eslint-plugin-react to automatically detect the version of React to use
-    }
-  },
-
-  // Fine tune rules
-  rules: {
-    "@typescript-eslint/no-var-requires": 0
-  }
-};

.prettierrc.js

@@ -1,4 +1,4 @@
-module.exports = {
+export default {
-    semi: true,
+  semi: true,
-    trailingComma: "all",
+  trailingComma: "all",
 };

eslint.config.js

@@ -0,0 +1,59 @@
+import js from "@eslint/js";
+import typescript from "@typescript-eslint/eslint-plugin";
+import typescriptParser from "@typescript-eslint/parser";
+import react from "eslint-plugin-react";
+import prettier from "eslint-plugin-prettier";
+import cssModules from "eslint-plugin-css-modules";
+import storybook from "eslint-plugin-storybook";
+
+export default [
+  js.configs.recommended,
+  {
+    files: ["**/*.{js,jsx,ts,tsx}"],
+    languageOptions: {
+      parser: typescriptParser,
+      parserOptions: {
+        sourceType: "module",
+        ecmaVersion: 2020,
+        ecmaFeatures: {
+          jsx: true,
+        },
+      },
+    },
+    plugins: {
+      "@typescript-eslint": typescript,
+      react,
+      prettier,
+      "css-modules": cssModules,
+      storybook,
+    },
+    settings: {
+      "import/resolver": {
+        node: {
+          extensions: [".js", ".jsx", ".ts", ".tsx"],
+        },
+      },
+      react: {
+        version: "detect",
+      },
+    },
+    rules: {
+      ...typescript.configs.recommended.rules,
+      ...react.configs.recommended.rules,
+      ...prettier.configs.recommended.rules,
+      "@typescript-eslint/no-var-requires": "off",
+      "@typescript-eslint/no-explicit-any": "off",
+      "react/react-in-jsx-scope": "off",
+      "no-undef": "off",
+    },
+  },
+  {
+    files: ["**/*.stories.{js,jsx,ts,tsx}"],
+    rules: {
+      ...storybook.configs.recommended.rules,
+    },
+  },
+  {
+    ignores: ["dist/**", "node_modules/**", "build/**"],
+  },
+];

jest.config.cjs

@@ -1,10 +1,10 @@
 module.exports = {
   preset: 'ts-jest',
   testEnvironment: 'jsdom',
-  setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
+  setupFilesAfterEnv: ['<rootDir>/jest.setup.cjs'],
   moduleNameMapper: {
     '\\.(css|less|scss|sass)$': 'identity-obj-proxy',
-    '\\.(jpg|jpeg|png|gif|svg)$': '<rootDir>/__mocks__/fileMock.js',
+    '\\.(jpg|jpeg|png|gif|svg)$': '<rootDir>/__mocks__/fileMock.cjs',
   },
   testMatch: [
     '**/__tests__/**/*.+(ts|tsx|js)',

package.json

@@ -1,6 +1,7 @@
 {
   "name": "threetwo",
   "version": "0.1.0",
+  "type": "module",
   "description": "ThreeTwo! A good comic book curator.",
   "scripts": {
     "build": "vite build",
@@ -117,6 +118,7 @@
     "@types/react-redux": "^7.1.34",
     "autoprefixer": "^10.4.27",
     "docdash": "^2.0.2",
+    "@eslint/js": "^10.0.0",
     "eslint": "^10.0.2",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-css-modules": "^2.12.0",

postcss.config.js

@@ -1,4 +1,4 @@
-module.exports = {
+export default {
   plugins: {
     "postcss-import": {},
     "@tailwindcss/postcss": {},

src/app.css

@@ -0,0 +1,43 @@
+@import "tailwindcss";
+@config "../tailwind.config.ts";
+
+/* Custom Project Fonts */
+@font-face {
+  font-family: "PP Object Sans Regular";
+  src: url("/fonts/PPObjectSans-Regular.otf") format("opentype");
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "PP Object Sans Heavy";
+  src: url("/fonts/PPObjectSans-Heavy.otf") format("opentype");
+  font-weight: 700;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "PP Object Sans Slanted";
+  src: url("/fonts/PPObjectSans-Slanted.otf") format("opentype");
+  font-weight: 400;
+  font-style: italic;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "PP Object Sans HeavySlanted";
+  src: url("/fonts/PPObjectSans-HeavySlanted.otf") format("opentype");
+  font-weight: 700;
+  font-style: italic;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "Hasklig Regular";
+  src: url("/fonts/Hasklig-Regular.otf") format("opentype");
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}

src/client/components/App.tsx

@@ -2,7 +2,7 @@ import React, { ReactElement, useEffect } from "react";
 import { Outlet } from "react-router-dom";
 import { Navbar2 } from "./shared/Navbar2";
 import { ToastContainer } from "react-toastify";
-import "../assets/scss/App.css";
+import "../../app.css";
 import { useStore } from "../store";
 
 export const App = (): ReactElement => {

tailwind.config.ts

@@ -1,7 +1,7 @@
 import { addDynamicIconSelectors } from "@iconify/tailwind";
+import type { Config } from "tailwindcss";
 
-/** @type {import('tailwindcss').Config} */
+const config: Config = {
-module.exports = {
   content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
   darkMode: "class",
   theme: {
@@ -43,3 +43,5 @@ module.exports = {
 
   plugins: [addDynamicIconSelectors()],
 };
+
+export default config;