linted, not great, but linted

Author: tjk

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

@@ -4,10 +4,10 @@ import { useCustomize } from "../hooks/customization-context";
 import type { CSSProperties } from "react";
 
 export function ControlBoolean() {
-  const props = useFormFieldContext<ConfigurablePropBoolean>();
+  const formFieldContextProps = useFormFieldContext<ConfigurablePropBoolean>();
   const {
     id, value, onChange,
-  } = props;
+  } = formFieldContextProps;
   const { getProps } = useCustomize();
   const baseStyles: CSSProperties = {
     width: "16px",

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

@@ -3,10 +3,10 @@ import { useFormFieldContext } from "../hooks/form-field-context";
 import { useCustomize } from "../hooks/customization-context";
 
 export function ControlInput() {
-  const props = useFormFieldContext();
+  const formFieldContextProps = useFormFieldContext();
   const {
     id, onChange, prop, value,
-  } = props;
+  } = formFieldContextProps;
   const {
     getProps, theme,
   } = useCustomize();
@@ -53,7 +53,7 @@ export function ControlInput() {
       name={prop.name}
       value={value ?? ""}
       onChange={(e) => onChange(toOnChangeValue(e.target.value))}
-      {...getProps("controlInput", baseStyles, props)}
+      {...getProps("controlInput", baseStyles, formFieldContextProps)}
       min={"min" in prop
         ? prop.min
         : undefined}

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

@@ -32,23 +32,23 @@ export function SelectApp({
       className="react-select-container text-sm"
       classNamePrefix="react-select"
       components={{
-        Option: (props) => (
-          <Option {...props}>
+        Option: (optionProps) => (
+          <Option {...optionProps}>
             <div style={{
               display: "flex",
               gap: 10,
             }}>
               <img
-                src={`https://pipedream.com/s.v0/${props.data.id}/logo/48`}
+                src={`https://pipedream.com/s.v0/${optionProps.data.id}/logo/48`}
                 style={{
                   height: 24,
                   width: 24,
                 }}
-                alt={props.data.name}
+                alt={optionProps.data.name}
               />
               <span style={{
                 whiteSpace: "nowrap",
-              }}>{props.data.name}</span>
+              }}>{optionProps.data.name}</span>
             </div>
           </Option>
         ),

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

@@ -268,9 +268,9 @@ export function useCustomize(): Customization {
   };
 }
 
-export const CustomizeProvider: React.FC<CustomizationConfig & { children: React.ReactNode; }> = ({
+export const CustomizeProvider = ({
   children,
   ...customizationProps
-}) => {
+}: CustomizationConfig<any, any, any> & { children: React.ReactNode; }) => { // eslint-disable-line @typescript-eslint/no-explicit-any
   return <CustomizationContext.Provider value={customizationProps}>{children}</CustomizationContext.Provider>;
 };

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

@@ -49,15 +49,15 @@ type FormContextProviderProps<T extends ConfigurableProps> = {
 };
 
 export const FormContextProvider = <T extends ConfigurableProps>({
-  children, props,
+  children, props: formProps,
 }: FormContextProviderProps<T>) => {
   const client = useFrontendClient();
 
   const id = useId();
 
   const {
     component, configuredProps: __configuredProps, propNames, userId,
-  } = props;
+  } = formProps;
   const componentId = component.key;
 
   const [
@@ -90,8 +90,8 @@ export const FormContextProvider = <T extends ConfigurableProps>({
     _configuredProps,
     _setConfiguredProps,
   ] = useState(configuredProps);
-  const setConfiguredProps = props.onUpdateConfiguredProps || _setConfiguredProps;
-  if (!props.onUpdateConfiguredProps) {
+  const setConfiguredProps = formProps.onUpdateConfiguredProps || _setConfiguredProps;
+  if (!formProps.onUpdateConfiguredProps) {
     configuredProps = _configuredProps;
   }
 
@@ -130,7 +130,7 @@ export const FormContextProvider = <T extends ConfigurableProps>({
   });
 
   // XXX fix types of dynamicProps, props.component so this type decl not needed
-  let configurableProps: T = dynamicProps?.configurable_props || props.component.configurable_props || [];
+  let configurableProps: T = dynamicProps?.configurable_props || formProps.component.configurable_props || [];
   if (propNames?.length) {
     const _configurableProps = [];
     for (const prop of configurableProps) {
@@ -299,7 +299,7 @@ export const FormContextProvider = <T extends ConfigurableProps>({
   const value: FormContext<T> = {
     id,
     isValid: !Object.keys(errors).length, // XXX want to expose more from errors
-    props,
+    props: formProps,
     userId,
     component,
     configurableProps,