chore(ui): clean Eslint error - WF-25

Get rid of all Eslint warning by hand and also bump `@typescript-eslint/eslint-plugin` to avoid incompatible Typescript version warning

src/ui/.eslintrc.cjs

@@ -1,8 +1,19 @@
 module.exports = {
 	rules: {
 		indent: "off",
-		"no-unused-vars": "warn",
-		"@typescript-eslint/no-unused-vars": "warn",
+		"no-unused-vars": "off",
+		"@typescript-eslint/no-unused-vars": [
+			"warn",
+			{
+				args: "all",
+				argsIgnorePattern: "^_",
+				caughtErrors: "all",
+				caughtErrorsIgnorePattern: "^_",
+				destructuredArrayIgnorePattern: "^_",
+				varsIgnorePattern: "^_",
+				ignoreRestSiblings: true,
+			},
+		],
 		"@typescript-eslint/no-explicit-any": "warn",
 		"@typescript-eslint/ban-types": "warn",
 		"prettier/prettier": [2, { useTabs: true, endOfLine: "auto" }],

src/ui/package.json

@@ -39,18 +39,6 @@
 		"vue-dompurify-html": "^5.0.1"
 	},
 	"devDependencies": {
-		"@types/google.maps": "3.55.5",
-		"@types/mapbox-gl": "3.1.0",
-		"@types/marked": "^6.0.0",
-		"@typescript-eslint/eslint-plugin": "7.5.0",
-		"@vitejs/plugin-vue": "^5.0.4",
-		"@vue/eslint-config-prettier": "^9.0.0",
-		"eslint": "^8.39.0",
-		"eslint-plugin-prettier": "5.1.3",
-		"eslint-plugin-vue": "^9.24.0",
-		"prettier": "3.2.5",
-		"vite": "^5.2.7",
-		"volar-service-vetur": "*",
 		"@chromatic-com/storybook": "1.2.26",
 		"@storybook/addon-essentials": "8.0.5",
 		"@storybook/addon-interactions": "8.0.5",
@@ -59,7 +47,19 @@
 		"@storybook/test": "8.0.5",
 		"@storybook/vue3": "8.0.5",
 		"@storybook/vue3-vite": "8.0.5",
+		"@types/google.maps": "3.55.5",
+		"@types/mapbox-gl": "3.1.0",
+		"@types/marked": "^6.0.0",
+		"@typescript-eslint/eslint-plugin": "7.18.0",
+		"@vitejs/plugin-vue": "^5.0.4",
+		"@vue/eslint-config-prettier": "^9.0.0",
+		"eslint": "^8.39.0",
+		"eslint-plugin-prettier": "5.1.3",
 		"eslint-plugin-storybook": "0.8.0",
-		"storybook": "8.0.5"
+		"eslint-plugin-vue": "^9.28.0",
+		"prettier": "3.2.5",
+		"storybook": "8.0.5",
+		"vite": "^5.2.7",
+		"volar-service-vetur": "*"
 	}
 }

src/ui/src/builder/BuilderComponentShortcuts.vue

@@ -213,7 +213,7 @@ const validChildrenTypes = computed(() => {
 function addComponent(event: Event) {
 	const definitionName = (event.target as HTMLInputElement).value;
 	const matchingTypes = Object.entries(validChildrenTypes.value).filter(
-		([type, definition]) => {
+		([_, definition]) => {
 			if (definition.name == definitionName) return true;
 			return false;
 		},

src/ui/src/builder/BuilderFieldsPadding.vue

@@ -143,8 +143,6 @@ import { Component } from "@/writerTypes";
 import { useComponentActions } from "./useComponentActions";
 import injectionKeys from "../injectionKeys";
 import BuilderSelect from "./BuilderSelect.vue";
-import { languages } from "monaco-editor";
-import css = languages.css;
 import BuilderTemplateInput from "./BuilderTemplateInput.vue";
 
 const wf = inject(injectionKeys.core);
@@ -380,14 +378,6 @@ const handleInputs = (ev: Event, subMode: SubMode, inputType?: string) => {
 	}
 };
 
-const handleInputXYsides = (ev: Event) => {
-	setContentValue(
-		component.value.id,
-		fieldKey.value,
-		(ev.target as HTMLInputElement).value + "px",
-	);
-};
-
 onMounted(() => {
 	rootEl.value.addEventListener("focus", autofocus);
 });

src/ui/src/builder/BuilderModal.vue

@@ -37,7 +37,7 @@ import { toRefs } from "vue";
 
 export type ModalAction = {
 	desc: string;
-	fn: Function;
+	fn: (..._args: unknown[]) => unknown;
 };
 
 const props = defineProps<{

src/ui/src/builder/BuilderStateExplorerTreeBranch.vue

@@ -80,7 +80,7 @@ const rootValue = computed(() => {
 	return getStateValue(rootAccessors.value);
 });
 
-function isStateObject(v: any) {
+function isStateObject(v: unknown): v is Record<string, unknown> {
 	return typeof v == "object" && v !== null && !Array.isArray(v);
 }
 

src/ui/src/components/core/content/CorePlotlyGraph.vue

@@ -121,7 +121,7 @@ function bindPlotlyEvents() {
 	);
 }
 
-function extractKeyInfoFromPoint(point: any) {
+function extractKeyInfoFromPoint(point) {
 	return {
 		curveNumber: point.curveNumber,
 		pointNumber: point.pointNumber,
@@ -142,10 +142,10 @@ function extractKeyInfoFromPoint(point: any) {
 }
 
 function getPlotlyEventHandler(eventType: string) {
-	return (plotlyEventData: any) => {
+	return (plotlyEventData) => {
 		const event = new CustomEvent(eventType, {
 			detail: {
-				payload: plotlyEventData?.points?.map((p: any) =>
+				payload: plotlyEventData?.points?.map((p) =>
 					extractKeyInfoFromPoint(p),
 				),
 			},

src/ui/src/components/core/embed/CoreGoogleMaps.vue

@@ -121,7 +121,7 @@ const initMap = async () => {
 		mapId: fields.mapId.value,
 	});
 
-	map.addListener("click", (e: any) => {
+	map.addListener("click", (e) => {
 		const event = new CustomEvent("gmap-click", {
 			detail: {
 				payload: e.latLng.toJSON(),

src/ui/src/components/core/input/CoreSelectInput.vue

@@ -17,7 +17,7 @@
 </template>
 
 <script lang="ts">
-import { computed, inject, Ref } from "vue";
+import { computed, inject } from "vue";
 import { ref } from "vue";
 import { FieldCategory, FieldType } from "@/writerTypes";
 import {

src/ui/src/components/core/other/CoreHtml.vue

@@ -59,7 +59,7 @@ export default {
 			cssClasses,
 		},
 	},
-	setup(props, { slots }) {
+	setup(_, { slots }) {
 		const fields = inject(injectionKeys.evaluatedFields);
 		return () => {
 			let insideHtmlNode = undefined;

src/ui/src/components/core/other/CorePagination.vue

@@ -183,10 +183,16 @@ const wf = inject(injectionKeys.core);
 const rootEl: Ref<HTMLElement> = ref(null);
 const instancePath = inject(injectionKeys.instancePath);
 
-const { formValue: pageValue, handleInput: handlePageInput } =
-	useFormValueBroker(wf, instancePath, rootEl);
-const { formValue: pageSizeValue, handleInput: handlePageSizeInput } =
-	useFormValueBroker(wf, instancePath, rootEl);
+const { handleInput: handlePageInput } = useFormValueBroker(
+	wf,
+	instancePath,
+	rootEl,
+);
+const { handleInput: handlePageSizeInput } = useFormValueBroker(
+	wf,
+	instancePath,
+	rootEl,
+);
 const pagesizeEnabled = computed(
 	() =>
 		fields.pageSizeOptions.value !== "" ||

src/ui/src/components/core/other/CoreRepeater.vue

@@ -40,7 +40,7 @@ export default {
 			},
 		},
 	},
-	setup(props, { slots }) {
+	setup(_, { slots }) {
 		const wf = inject(injectionKeys.core);
 		const componentId = inject(injectionKeys.componentId);
 		const fields = inject(injectionKeys.evaluatedFields);
@@ -59,7 +59,7 @@ export default {
 
 			const repeatedChildrenVNodes = Object.values(
 				fields.repeaterObject.value,
-			).map((item, itemIndex) =>
+			).map((_item, itemIndex) =>
 				children.value.map((childComponent) =>
 					renderProxiedComponent(childComponent.id, itemIndex),
 				),

src/ui/src/components/workflows/WorkflowsRoot.vue

@@ -10,10 +10,6 @@
 </template>
 
 <script lang="ts">
-import { FieldType } from "@/writerTypes";
-import { nextTick } from "vue";
-import { useEvaluator } from "@/renderer/useEvaluator";
-
 const description =
 	"The root component of the application, which serves as the starting point of the component hierarchy.";
 
@@ -33,7 +29,6 @@ import { computed, inject, ref, Ref } from "vue";
 import injectionKeys from "@/injectionKeys";
 
 const wf = inject(injectionKeys.core);
-const ssbm = inject(injectionKeys.builderManager);
 const getChildrenVNodes = inject(injectionKeys.getChildrenVNodes);
 const rootEl: Ref<HTMLElement> = ref(null);
 

src/ui/src/components/workflows/WorkflowsWorkflow.vue

@@ -105,7 +105,6 @@ const renderProxiedComponent = inject(injectionKeys.renderProxiedComponent);
 
 const rootEl: Ref<HTMLElement | null> = ref(null);
 const nodeContainerEl: Ref<HTMLElement | null> = ref(null);
-const fields = inject(injectionKeys.evaluatedFields);
 const wf = inject(injectionKeys.core);
 const wfbm = inject(injectionKeys.builderManager);
 const arrows: Ref<WorkflowArrowData[]> = ref([]);
@@ -136,8 +135,6 @@ function refreshArrows() {
 		return;
 	}
 
-	const arrowSlot: Record<Component["id"], number> = {};
-
 	nodes.value
 		.filter((node) => node.outs?.length > 0)
 		.forEach((node) => {

src/ui/src/components/workflows/abstract/WorkflowsNode.vue

@@ -31,8 +31,6 @@
 </template>
 
 <script lang="ts">
-import { FieldCategory, FieldType } from "@/writerTypes";
-
 export default {
 	writer: {
 		name: "Node",
@@ -47,7 +45,6 @@ export default {
 </script>
 <script setup lang="ts">
 import { computed, inject, watch } from "vue";
-import { Component } from "@/writerTypes";
 import injectionKeys from "@/injectionKeys";
 
 const emit = defineEmits(["outSelect", "engaged"]);

src/ui/src/components/workflows/base/WorkflowArrow.vue

@@ -46,7 +46,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref } from "vue";
+import { computed } from "vue";
 import { type WorkflowArrowData } from "../WorkflowsWorkflow.vue";
 
 const PROTRUSION_LENGTH = 30;

src/ui/src/renderer/ComponentProxy.vue

@@ -28,7 +28,7 @@ export default {
 	props: {
 		componentId: { type: String, required: true },
 		instancePath: { type: Array as PropType<InstancePath>, required: true },
-		instanceData: { validator: () => true, required: true },
+		instanceData: { type: Array, required: true },
 	},
 	setup(props) {
 		const wf = inject(injectionKeys.core);
@@ -111,7 +111,7 @@ export default {
 		const getChildrenVNodes = (
 			instanceNumber: InstancePathItem["instanceNumber"] = 0,
 			slotName: string = "default",
-			componentFilter: (c: Component) => boolean = () => true,
+			componentFilter: (_c: Component) => boolean = () => true,
 			positionlessSlot: boolean = false,
 		): VNode[] => {
 			const renderInsertionSlot = (position: number): VNode[] => {
@@ -163,7 +163,7 @@ export default {
 		provide(injectionKeys.isBeingEdited, isBeingEdited);
 		provide(injectionKeys.isDisabled, isDisabled);
 		provide(injectionKeys.instancePath, instancePath);
-		provide(injectionKeys.instanceData, instanceData as any);
+		provide(injectionKeys.instanceData, instanceData);
 		provide(injectionKeys.renderProxiedComponent, renderProxiedComponent);
 		provide(injectionKeys.getChildrenVNodes, getChildrenVNodes);
 		provide(injectionKeys.flattenedInstancePath, flattenedInstancePath);
@@ -232,7 +232,7 @@ export default {
 				const pageKey = handlerFunctionName.substring(
 					"$goToPage_".length,
 				);
-				return (ev: Event) => wf.setActivePageFromKey(pageKey);
+				return (_ev: Event) => wf.setActivePageFromKey(pageKey);
 			}
 			return null;
 		};
@@ -351,7 +351,7 @@ export default {
 			}: {
 				instanceNumber: number;
 				slotName: string;
-				componentFilter: (c: Component) => boolean;
+				componentFilter: (_c: Component) => boolean;
 				positionlessSlot: boolean;
 			}) => {
 				if (isChildless.value) {

src/ui/src/renderer/ComponentRenderer.vue

@@ -129,7 +129,7 @@ async function importModule(moduleKey: string, specifier: string) {
 async function handleFunctionCall(
 	moduleKey: string,
 	functionName: string,
-	args: any[],
+	args: unknown[],
 ) {
 	const specifier = importedModulesSpecifiers[moduleKey];
 	const m = await import(/* @vite-ignore */ specifier);
@@ -208,7 +208,7 @@ function addMailSubscriptions() {
 		}: {
 			moduleKey: string;
 			functionName: string;
-			args: any[];
+			args: unknown[];
 		}) => {
 			handleFunctionCall(moduleKey, functionName, args);
 		},