Fix linter issues

Author: jverce

packages/connect-react/package.json

@@ -18,6 +18,8 @@
   },
   "scripts": {
     "build": "vite build",
+    "lint": "eslint src",
+    "lint:fix": "eslint src --fix",
     "prepare": "pnpm run build",
     "watch": "NODE_ENV=development vite build --watch --mode development"
   },

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

@@ -39,6 +39,7 @@ export function Control<T extends ConfigurableProps, U extends ConfigurableProp>
   }
 
   if ("options" in prop && prop.options) {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const options: LabelValueOption<any>[] = prop.options.map(sanitizeOption);
     return <ControlSelect options={options} components={{
       IndicatorSeparator: () => null,

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

@@ -93,8 +93,7 @@ export function ControlApp({ app }: ControlAppProps) {
       useQueryOpts: {
         enabled: !!app,
 
-        // this seems to work (this overrides enabled so don't just set to true)
-        // @ts-ignore
+        // @ts-expect-error this seems to work (this overrides enabled so don't just set to true)
         suspense: !!app,
       },
     },
@@ -124,7 +123,9 @@ export function ControlApp({ app }: ControlAppProps) {
   const selectOptions = useMemo<SelectValue[]>(() => [
     ...accounts,
     newAccountPlaceholder,
-  ], [accounts]);
+  ], [
+    accounts,
+  ]);
 
   const selectValue = useMemo<SelectValue>(() => {
     if (value?.authProvisionId) {

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

@@ -3,7 +3,9 @@ import {
   useMemo,
   useState,
 } from "react";
-import type { CSSObjectWithLabel, MenuListProps } from "react-select";
+import type {
+  CSSObjectWithLabel, MenuListProps,
+} from "react-select";
 import Select, {
   components,
   Props as ReactSelectProps,
@@ -12,7 +14,7 @@ import CreatableSelect from "react-select/creatable";
 import type { BaseReactSelectProps } from "../hooks/customization-context";
 import { useCustomize } from "../hooks/customization-context";
 import { useFormFieldContext } from "../hooks/form-field-context";
-import { LabelValueOption, RawPropOption } from "../types";
+import { LabelValueOption } from "../types";
 import {
   isOptionWithLabel,
   sanitizeOption,
@@ -26,7 +28,7 @@ type ControlSelectProps<T> = {
   selectProps?: ReactSelectProps<LabelValueOption<T>, boolean>;
   showLoadMoreButton?: boolean;
   onLoadMore?: () => void;
-  components?: ReactSelectProps<LabelValueOption<T>, boolean>['components'];
+  components?: ReactSelectProps<LabelValueOption<T>, boolean>["components"];
 };
 
 export function ControlSelect<T>({
@@ -89,8 +91,7 @@ export function ControlSelect<T>({
           selectOptions.find((item) => item.value === o) || {
             label: String(o),
             value: o,
-          }
-        );
+          });
       }
     } else if (ret && typeof ret === "object" && "__lv" in ret) {
       // Extract the actual option from __lv wrapper

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

@@ -38,13 +38,15 @@ export function ControlSubmit<T extends ConfigurableProps>(props: ControlSubmitP
 
   return <input
     type="submit"
-    value={submitting ? "Submitting..." : "Submit"}
+    value={submitting
+      ? "Submitting..."
+      : "Submit"}
     {
-    ...getProps(
-      "controlSubmit",
-      baseStyles(!!propsNeedConfiguring.length || submitting),
-      props as ControlSubmitProps<ConfigurableProps>
-    )
+      ...getProps(
+        "controlSubmit",
+        baseStyles(!!propsNeedConfiguring.length || submitting),
+      props as ControlSubmitProps<ConfigurableProps>,
+      )
     }
     disabled={!!propsNeedConfiguring.length || submitting}
   />;

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

@@ -1,4 +1,4 @@
-import type { ConfigurableProp, ConfigurablePropApp } from "@pipedream/sdk";
+import type { ConfigurableProp } from "@pipedream/sdk";
 import { FormFieldContext } from "../hooks/form-field-context";
 import { useFormContext } from "../hooks/form-context";
 import { Field } from "./Field";
@@ -28,8 +28,7 @@ export function InternalField<T extends ConfigurableProp>({
     useQueryOpts: {
       enabled: !!appSlug,
 
-      // this seems to work (this overrides enabled so don't just set to true)
-      // @ts-ignore
+      // @ts-expect-error this seems to work (this overrides enabled so don't just set to true)
       suspense: !!appSlug,
     },
   });

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

@@ -4,8 +4,12 @@ import { useState } from "react";
 import { useFormContext } from "../hooks/form-context";
 import { useFormFieldContext } from "../hooks/form-field-context";
 import { useFrontendClient } from "../hooks/frontend-client-context";
-import { ConfigureComponentContext, RawPropOption } from "../types";
-import { isString, sanitizeOption } from "../utils/type-guards";
+import {
+  ConfigureComponentContext, RawPropOption,
+} from "../types";
+import {
+  isString, sanitizeOption,
+} from "../utils/type-guards";
 import { ControlSelect } from "./ControlSelect";
 
 export type RemoteOptionsContainerProps = {

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

@@ -252,7 +252,9 @@ export const FormContextProvider = <T extends ConfigurableProps>({
     if (prop.type === "app") {
       const field = fields[prop.name]
       if (field) {
-        const app = "app" in field.extra ? field.extra.app : undefined
+        const app = "app" in field.extra
+          ? field.extra.app
+          : undefined
         errs.push(...(appPropErrors({
           prop,
           value,
@@ -529,6 +531,7 @@ export const FormContextProvider = <T extends ConfigurableProps>({
       }
     }
 
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const errorFromDetails = (data: any, ret: SdkError[]) => {
       ret.push({
         name: data.error,

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

@@ -2,13 +2,15 @@ import {
   createContext, useContext,
 } from "react";
 import type {
-  AppResponse, ConfigurableProp, ConfigurablePropApp, PropValue,
+  ConfigurableProp,
+  ConfigurablePropApp,
+  PropValue,
 } from "@pipedream/sdk";
 import { App } from "@pipedream/sdk/browser";
 
 export type FormFieldContextExtra<T extends ConfigurableProp> = T extends ConfigurablePropApp ? {
   app?: App;
-} : {};
+} : object;
 
 export type FormFieldContext<T extends ConfigurableProp> = {
   id: string;

packages/connect-react/src/types.ts

@@ -39,7 +39,7 @@ export type LabelValueOption<T> = {
 }
 
 export type NestedLabelValueOption<T> = {
-  __lv: LabelValueOption<T>;
+  __lv: LabelValueOption<T> | T[];
 }
 
 export type RawPropOption<T> =