chore: slightly better TS configuration for all packages (#684)

configuration/tests-helpers.ts

@@ -2,19 +2,26 @@
  * This function checks if the provided HTMLElement has
  * all the classes specified in the `classes` array.
  *
- * It is designed to be used in Jest tests ONLY.
+ * It is designed to be used in Jest/Vitest tests ONLY.
  *
  * @param {HTMLElement} element - The element to check.
  * @param {string[]} classes - An array of class names that the element is expected to have.
  **/
 export const expectToHaveClasses = (
-	element: HTMLElement | Element,
-	classes: string[],
+	element?: HTMLElement | Element,
+	classes?: string[],
 ) => {
-	const elementClasses = new Set(element.className.split(" "));
-	classes.sort().forEach((expectedClass) => {
-		expect(Array.from(elementClasses)).toContain(expectedClass);
-	});
+	if (!element || !classes) {
+		throw new Error(
+			"No element or no classes provided to check classes against",
+		);
+	} else {
+		const elementClasses = new Set(element.className.split(" "));
+		classes.sort().forEach((expectedClass) => {
+			// biome-ignore lint: expect is global
+			expect(Array.from(elementClasses)).toContain(expectedClass);
+		});
+	}
 };
 
 export const expectToHaveStyles = (
@@ -23,6 +30,7 @@ export const expectToHaveStyles = (
 ) => {
 	const elementStyles = getComputedStyle(element);
 	Object.entries(styles).forEach(([property, value]) => {
+		// biome-ignore lint: expect is global
 		expect(elementStyles.getPropertyValue(property)).toBe(value);
 	});
 };

configuration/tsconfig.common.json

@@ -1,24 +1,48 @@
+/**
+ * allowImportingTsExtensions: Allow importing TypeScript files without specifying the extension.
+ * isolatedModules: Ensure that each file is treated as a separate module.
+ * jsx: Specify the JSX factory function.
+ * lib: Specify the library files to be included in the compilation.
+ * module: Specify the module code generation.
+ * moduleDetection: Specify the module type for the project.
+ * moduleResolution: Specify how TypeScript should resolve module imports.
+ * noEmit: Disable emitting files during the compilation.
+ * noFallthroughCasesInSwitch: Enable error reporting for fallthrough cases in switch statements.
+ * noImplicitOverride: Ensure overriding members in derived classes are marked with an
+ *                     override modifier.
+ * noUncheckedIndexedAccess: Enable error reporting for indexed access expressions that can be
+ *                           undefined.
+ * noUnusedLocals: Enable error reporting for unused local variables.
+ * noUnusedParameters: Enable error reporting for unused parameters.
+ * resolveJsonModule: Enable importing JSON files as modules.
+ * skipLibCheck: Skip type checking of declaration files.
+ * strict: Enable all strict type checking options.
+ * target: Specify the ECMAScript target version.
+ * types: Specify the types to include in the compilation.
+ * useDefineForClassFields: Emit ECMAScript standard class fields.
+ * verbatimModuleSyntax: Preserve the import statements in the output.
+ */
 {
 	"compilerOptions": {
-		"target": "ES2020",
-		"useDefineForClassFields": true,
-		"lib": ["ES2020", "DOM", "DOM.Iterable"],
-		"module": "ESNext",
-		"skipLibCheck": true,
-		"types": ["vitest/globals", "@testing-library/jest-dom"],
-
-		/* Bundler mode */
-		"moduleResolution": "bundler",
 		"allowImportingTsExtensions": true,
-		"resolveJsonModule": true,
 		"isolatedModules": true,
-		"noEmit": true,
 		"jsx": "react-jsx",
-
-		/* Linting */
-		"strict": true,
+		"lib": ["ES2020", "DOM", "DOM.Iterable"],
+		"module": "Preserve",
+		"moduleDetection": "force",
+		"moduleResolution": "bundler",
+		"noEmit": true,
+		"noFallthroughCasesInSwitch": true,
+		"noImplicitOverride": true,
+		"noUncheckedIndexedAccess": true,
 		"noUnusedLocals": true,
 		"noUnusedParameters": true,
-		"noFallthroughCasesInSwitch": true
+		"resolveJsonModule": true,
+		"skipLibCheck": true,
+		"strict": true,
+		"target": "ES2020",
+		"types": ["vitest/globals", "@testing-library/jest-dom"],
+		"useDefineForClassFields": true,
+		"verbatimModuleSyntax": true
 	}
 }

packages/ui-bubble/src/components/Bubble/Bubble.tsx

@@ -2,7 +2,7 @@ import { ButtonIcon } from "@versini/ui-button";
 import { IconCopied, IconCopy } from "@versini/ui-icons";
 import { useEffect, useState } from "react";
 
-import { BubbleProps } from "./BubbleTypes";
+import type { BubbleProps } from "./BubbleTypes";
 import { getBubbleClasses } from "./utilities";
 
 export const Bubble = ({

packages/ui-header/src/components/Header/Header.tsx

@@ -2,7 +2,7 @@ import { getSpacing } from "@versini/ui-private/dist/utilities";
 import clsx from "clsx";
 
 import { HEADER_CLASSNAME } from "../../common/constants";
-import { HeaderProps } from "./HeaderTypes";
+import type { HeaderProps } from "./HeaderTypes";
 
 export const Header = ({
 	children,

packages/ui-menu/src/components/Menu/__tests__/utilities.test.tsx

@@ -1,4 +1,3 @@
-import { Component } from "react";
 import { getDisplayName } from "../utilities";
 
 describe("getDisplayName", () => {
@@ -20,27 +19,15 @@ describe("getDisplayName", () => {
 	});
 
 	it("returns display name for component", () => {
-		class Simple extends Component {
-			render() {
-				return <div />;
-			}
-		}
-		expect(getDisplayName(Simple)).toBe("Simple");
-	});
-
-	it("returns display name for component when displayName is set from static initializer", () => {
-		class Simple extends Component {
-			static displayName = "Simple";
-			render() {
-				return <div />;
-			}
-		}
+		const Simple = () => {
+			return <div />;
+		};
+		Simple.displayName = "Simple";
 		expect(getDisplayName(Simple)).toBe("Simple");
 	});
 
 	it("returns display name for a stateless component", () => {
 		const Simple = () => <div />;
-
 		expect(getDisplayName(Simple)).toBe("Simple");
 	});
 

packages/ui-textarea/src/components/TextArea/__tests__/TextArea.test.tsx

@@ -20,7 +20,7 @@ describe("TextArea modifiers", () => {
 		const label = await screen.findAllByText("hello world");
 		const input = await screen.findByRole("textbox");
 
-		expect(label[0].className).toContain("sr-only");
+		expect(label[0]?.className).toContain("sr-only");
 		expectToHaveClasses(label[1], [
 			"absolute",
 			"cursor-text",
@@ -59,7 +59,7 @@ describe("TextArea modifiers", () => {
 		const label = await screen.findAllByText("hello world");
 		const input = await screen.findByRole("textbox");
 
-		expect(label[0].className).toContain("sr-only");
+		expect(label[0]?.className).toContain("sr-only");
 		expectToHaveClasses(label[1], [
 			"absolute",
 			"cursor-text",
@@ -93,7 +93,7 @@ describe("TextArea modifiers", () => {
 		const label = await screen.findAllByText("hello world");
 		const input = await screen.findByRole("textbox");
 
-		expect(label[0].className).toContain("sr-only");
+		expect(label[0]?.className).toContain("sr-only");
 		expectToHaveClasses(label[1], [
 			"absolute",
 			"cursor-text",
@@ -242,7 +242,7 @@ describe("TextArea modifiers", () => {
 		render(<TextArea label="hello world" name="toto" disabled />);
 		const label = await screen.findAllByText("hello world");
 
-		expect(label[0].className).toContain("sr-only");
+		expect(label[0]?.className).toContain("sr-only");
 		expectToHaveClasses(label[1], [
 			"px-2",
 			"absolute",

packages/ui-textinput/src/components/TextInput/__tests__/TextInput.test.tsx

@@ -16,7 +16,7 @@ describe("TextInput modifiers", () => {
 		const label = await screen.findAllByText("hello world");
 		const input = await screen.findByRole("textbox");
 
-		expect(label[0].className).toContain("sr-only");
+		expect(label[0]?.className).toContain("sr-only");
 		expectToHaveClasses(label[1], [
 			"absolute",
 			"cursor-text",
@@ -51,7 +51,7 @@ describe("TextInput modifiers", () => {
 		const label = await screen.findAllByText("hello world");
 		const input = await screen.findByRole("textbox");
 
-		expect(label[0].className).toContain("sr-only");
+		expect(label[0]?.className).toContain("sr-only");
 		expectToHaveClasses(label[1], [
 			"absolute",
 			"cursor-text",
@@ -80,7 +80,7 @@ describe("TextInput modifiers", () => {
 		render(<TextInput mode="dark" label="hello world" name="toto" />);
 		const label = await screen.findAllByText("hello world");
 		const input = await screen.findByRole("textbox");
-		expect(label[0].className).toContain("sr-only");
+		expect(label[0]?.className).toContain("sr-only");
 		expectToHaveClasses(label[1], [
 			"absolute",
 			"cursor-text",
@@ -197,7 +197,7 @@ describe("TextInput modifiers", () => {
 		render(<TextInput label="hello world" name="toto" disabled />);
 		const label = await screen.findAllByText("hello world");
 
-		expect(label[0].className).toContain("sr-only");
+		expect(label[0]?.className).toContain("sr-only");
 		expectToHaveClasses(label[1], [
 			"px-2",
 			"absolute",