Fix linter issues

Author: jverce

packages/connect-react/src/components/ControlInput.tsx

@@ -59,7 +59,7 @@ export function ControlInput() {
       id={id}
       type={inputType}
       name={prop.name}
-      value={String(value) ?? ""}
+      value={String(value ?? "")}
       onChange={(e) => onChange(toOnChangeValue(e.target.value))}
       {...getProps("controlInput", baseStyles, formFieldContextProps)}
       min={min}

packages/connect-react/src/components/ControlSelect.tsx

@@ -88,8 +88,7 @@ export function ControlSelect<T extends PropOptionValue>({
       // if simple, make lv (XXX combine this with other place this happens)
       if (!isOptionWithLabel(rawValue[0])) {
         return rawValue.map((o) =>
-          selectOptions.find((item) => item.value === o) || sanitizeOption(o as T),
-        );
+          selectOptions.find((item) => item.value === o) || sanitizeOption(o as T));
       }
     } else if (rawValue && typeof rawValue === "object" && "__lv" in (rawValue as Record<string, unknown>)) {
       // Extract the actual option from __lv wrapper and sanitize to LV

packages/connect-react/src/components/Field.tsx

@@ -58,8 +58,9 @@ export function Field<T extends ConfigurableProp>(props: FieldProps<T>) {
   // XXX rename to FieldErrors + add FormErrors (to ComponentFormInternal)
   // XXX use similar pattern as app below for boolean and checkboxing DOM re-ordering?
 
+  const fieldProps = props as unknown as FieldProps<ConfigurableProp>;
   return (
-    <div {...getProps("field", baseStyles, props)}>
+    <div {...getProps("field", baseStyles, fieldProps)}>
       <Label text={labelText} field={field} form={form} />
       <Control field={field} form={form} />
       <Description markdown={prop.description} field={field} form={form} />

packages/connect-react/src/components/InternalField.tsx

@@ -1,4 +1,6 @@
-import type { ConfigurableProp, ConfigurablePropApp } from "@pipedream/sdk";
+import type {
+  ConfigurableProp, ConfigurablePropApp,
+} from "@pipedream/sdk";
 import { FormFieldContext } from "../hooks/form-field-context";
 import { useFormContext } from "../hooks/form-context";
 import { Field } from "./Field";

packages/connect-react/src/components/RemoteOptionsContainer.tsx

@@ -1,4 +1,6 @@
-import type { ConfigurePropOpts, PropOptionValue } from "@pipedream/sdk";
+import type {
+  ConfigurePropOpts, PropOptionValue,
+} from "@pipedream/sdk";
 import { useQuery } from "@tanstack/react-query";
 import { useState } from "react";
 import { useFormContext } from "../hooks/form-context";

packages/connect-react/src/hooks/customization-context.tsx

@@ -39,7 +39,6 @@ import { ControlSubmit } from "../components/ControlSubmit";
 import { Description } from "../components/Description";
 import { Errors } from "../components/Errors";
 import { Field } from "../components/Field";
-import type { FieldProps } from "../components/Field";
 import { Label } from "../components/Label";
 import { LoadMoreButton } from "../components/LoadMoreButton";
 import { OptionalFieldButton } from "../components/OptionalFieldButton";
@@ -85,8 +84,7 @@ export type CustomizableProps = {
   description: ComponentProps<typeof Description>;
   error: ComponentProps<typeof Errors>;
   errors: ComponentProps<typeof Errors>;
-  // Accept any field generic to avoid forcing a specific T at call sites
-  field: FieldProps<any>;
+  field: ComponentProps<typeof Field>;
   heading: ComponentProps<typeof ComponentForm>;
   label: ComponentProps<typeof Label>;
   optionalFields: ComponentProps<typeof ComponentForm>;

packages/connect-react/src/hooks/form-context.tsx

@@ -1,5 +1,11 @@
 import {
-  createContext, useContext, useEffect, useId, useMemo, useState, type ReactNode,
+  createContext,
+  useContext,
+  useEffect,
+  useId,
+  useMemo,
+  useState,
+  type ReactNode,
 } from "react";
 import isEqual from "lodash.isequal";
 import { useQuery } from "@tanstack/react-query";
@@ -14,7 +20,6 @@ import type {
   ConfiguredProps,
   DynamicProps,
   Observation,
-  ObservationError,
   ReloadPropsOpts,
   ReloadPropsResponse,
   Component,
@@ -24,10 +29,16 @@ import { useFrontendClient } from "./frontend-client-context";
 import type { ComponentFormProps } from "../components/ComponentForm";
 import type { FormFieldContext } from "./form-field-context";
 import {
-  appPropErrors, arrayPropErrors, booleanPropErrors, integerPropErrors,
+  appPropErrors,
+  arrayPropErrors,
+  booleanPropErrors,
+  integerPropErrors,
   stringPropErrors,
 } from "../utils/component";
-import { SdkError, ObservationErrorDetails } from "../types";
+import {
+  SdkError,
+  ObservationErrorDetails,
+} from "../types";
 import { resolveUserId } from "../utils/resolve-user-id";
 
 export type AnyFormFieldContext = Omit<FormFieldContext<ConfigurableProp>, "onChange"> & {
@@ -371,7 +382,8 @@ export const FormContextProvider = <T extends ConfigurableProps>({
       const value = configuredProps[prop.name as keyof ConfiguredProps<T>];
       if (value === undefined) {
         if ("default" in prop && prop.default != null) {
-          newConfiguredProps[prop.name as keyof ConfiguredProps<T>] = prop.default as any; // default may be loosely typed
+          // default may be loosely typed
+          newConfiguredProps[prop.name as keyof ConfiguredProps<T>] = prop.default as any; // eslint-disable-line @typescript-eslint/no-explicit-any
         }
       } else {
         if (prop.type === "integer" && typeof value !== "number") {

packages/connect-react/src/hooks/use-app.tsx

@@ -9,7 +9,7 @@ import { useFrontendClient } from "./frontend-client-context";
  */
 export const useApp = (
   slug: string,
-  opts?: { useQueryOpts?: (Omit<UseQueryOptions<GetAppResponse>, "queryKey" | "queryFn"> & { suspense?: boolean }) }
+  opts?: { useQueryOpts?: (Omit<UseQueryOptions<GetAppResponse>, "queryKey" | "queryFn"> & { suspense?: boolean }) },
 ) => {
   const client = useFrontendClient();
   const query = useQuery({

packages/connect-react/src/hooks/use-apps.tsx

@@ -1,5 +1,7 @@
 import { useQuery } from "@tanstack/react-query";
-import type { AppsListRequest, App } from "@pipedream/sdk";
+import type {
+  AppsListRequest, App,
+} from "@pipedream/sdk";
 import { useFrontendClient } from "./frontend-client-context";
 
 /**
@@ -9,7 +11,6 @@ export const useApps = (input?: AppsListRequest): {
   apps: App[];
   isLoading: boolean;
   error: Error | null;
-  refetch: () => void;
 } => {
   const client = useFrontendClient();
   const query = useQuery({

packages/connect-react/src/hooks/use-components.tsx

@@ -1,5 +1,8 @@
-import { useQuery, UseQueryResult } from "@tanstack/react-query";
-import type { ComponentsListRequest, Component } from "@pipedream/sdk";
+import { useQuery } from "@tanstack/react-query";
+import type {
+  ComponentsListRequest,
+  Component,
+} from "@pipedream/sdk";
 import { useFrontendClient } from "./frontend-client-context";
 
 /**
@@ -9,7 +12,6 @@ export const useComponents = (input?: ComponentsListRequest): {
   components: Component[];
   isLoading: boolean;
   error: Error | null;
-  refetch: () => void;
 } => {
   const client = useFrontendClient();
   const query = useQuery({