Better library support and better linting

eslint.config.js

@@ -3,6 +3,7 @@ import globals from 'globals'
 import reactHooks from 'eslint-plugin-react-hooks'
 import reactRefresh from 'eslint-plugin-react-refresh'
 import tseslint from 'typescript-eslint'
+import importPlugin from "eslint-plugin-import";
 
 export default tseslint.config(
   { ignores: ['dist'] },
@@ -19,13 +20,19 @@ export default tseslint.config(
     plugins: {
       'react-hooks': reactHooks,
       'react-refresh': reactRefresh,
+      'import': importPlugin,
     },
     rules: {
       ...reactHooks.configs.recommended.rules,
       'react-refresh/only-export-components': [
         'warn',
         { allowConstantExport: true },
       ],
+      'import/extensions': ['error', 'ignorePackages', {
+        js: 'never',
+        mjs: 'never',
+        jsx: 'never',
+      }],
     },
   },
 )

lib/components/index.ts

@@ -1,2 +1,2 @@
-export * from "./OpenProjectWorkPackageBlock";
-export * from "./ShadowDomWrapper";
+export * from "./OpenProjectWorkPackageBlock.tsx";
+export * from "./ShadowDomWrapper.tsx";

lib/hooks/useWorkPackage.ts

@@ -1,6 +1,6 @@
 import { useEffect, useState, useCallback } from "react";
 import type { WorkPackage } from "../openProjectTypes";
-import { OpenProjectApiError, fetchWorkPackage } from "../services/openProjectApi";
+import { OpenProjectApiError, fetchWorkPackage } from "../services/openProjectApi.ts";
 
 export function useWorkPackage(wpid: number|undefined) {
   const [workPackage, setWorkPackage] = useState<WorkPackage | null>(null);

lib/hooks/useWorkPackageSearch.ts

@@ -1,6 +1,6 @@
 import { useState, useEffect } from "react";
 import type { WorkPackage } from "../openProjectTypes";
-import { searchWorkPackages } from "../services/openProjectApi";
+import { searchWorkPackages } from "../services/openProjectApi.ts";
 
 interface UseWorkPackageSearchOptions {
   debounce?: number;

lib/index.ts

@@ -1,3 +1,3 @@
 import "./services/i18n.ts";
-export * from "./components";
-export { initializeOpBlockNoteExtensions } from "./initialize"
+export * from "./components/index.ts";
+export { initializeOpBlockNoteExtensions } from "./initialize.ts"

lib/services/colors.ts

@@ -1,5 +1,5 @@
-import { type WorkPackage, type OpColorMode } from "../openProjectTypes";
-import { fetchTypes, fetchStatuses } from "./openProjectApi";
+import { type WorkPackage, type OpColorMode } from "../openProjectTypes.ts";
+import { fetchTypes, fetchStatuses } from "./openProjectApi.ts";
 import { useEffect, useState } from "react";
 
 const FALLBACK_TYPE_COLOR = "#3f3f3f";

lib/services/openProjectApi.ts

@@ -1,5 +1,5 @@
 
-import type {OpenProjectResponse, StatusCollection, TypeCollection, WorkPackage} from "../openProjectTypes";
+import type {OpenProjectResponse, StatusCollection, TypeCollection, WorkPackage} from "../openProjectTypes.ts";
 
 let baseUrl = "https://openproject.local";
 
@@ -34,7 +34,8 @@ async function get<T>(endpoint: string): Promise<T> {
 
 export function linkToWorkPackage(id: number): string {
   if (isNaN(id) || id <= 0) {
-    throw new OpenProjectApiError(`Invalid work package ID: ${id}`);
+    console.warn(`Invalid work package ID: ${id}`);
+    return `${baseUrl}`;
   }
   return `${baseUrl}/wp/${id}`;
 }