Merge branch 'connect-react-preview' of github.com:PipedreamHQ/pipedream into connect-react-preview

Author: dylburger

eslint.config.mjs

@@ -37,6 +37,7 @@ export default [
       "**/*.lock",
       "**/*.py",
       "**/*.png",
+      "**/.next",
     ],
   },
   ...compat.extends(

packages/connect-react/.eslintignore

@@ -8,18 +8,18 @@ import type {
 } from "@pipedream/sdk";
 import { InternalComponentForm } from "./InternalComponentForm";
 
-export type ComponentFormProps<T extends ConfigurableProps = any> = {
+export type ComponentFormProps<T extends ConfigurableProps> = {
   userId: string;
   component: V1Component<T>;
   configuredProps?: ConfiguredProps<T>; // XXX value?
   disableQueryDisabling?: boolean;
   propNames?: string[]; // TODO PropNames<T>
-  onSubmit?: (ctx: FormContext) => void | Promise<void>; // if passed, we include button
+  onSubmit?: (ctx: FormContext<T>) => void | Promise<void>; // if passed, we include button
   onUpdateConfiguredProps?: (v: ConfiguredProps<T>) => void; // XXX onChange?
   hideOptionalProps?: boolean;
 };
 
-export function ComponentForm(props: ComponentFormProps) {
+export function ComponentForm<T extends ConfigurableProps>(props: ComponentFormProps<T>) {
   return (
     <FormContextProvider props={props}>
       <InternalComponentForm />

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

@@ -3,10 +3,10 @@ import { useCustomize } from "../hooks/customization-context";
 import type { CSSProperties } from "react";
 
 export function ControlAny() {
-  const props = useFormFieldContext();
+  const formFieldContext = useFormFieldContext();
   const {
     id, onChange, value,
-  } = props;
+  } = formFieldContext;
   const {
     getProps, theme,
   } = useCustomize();
@@ -29,7 +29,7 @@ export function ControlAny() {
       id={id}
       value={jsonValue}
       onChange={(e) => onChange(e.target.value)}
-      {...getProps("controlAny", baseStyles, props)}
+      {...getProps("controlAny", baseStyles, formFieldContext)}
     />
   );
 }

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

@@ -6,13 +6,12 @@ import { useCustomize } from "../hooks/customization-context";
 import type { BaseReactSelectProps } from "../hooks/customization-context";
 import { useMemo } from "react";
 import type { CSSProperties } from "react";
-
 import type { OptionProps } from "react-select";
-import {
+import type {
   AppResponse, ConfigurablePropApp,
 } from "@pipedream/sdk";
 
-const BaseOption = (props: OptionProps<any>) => {
+const BaseOption = (props: OptionProps<AppResponse>) => {
   // const imgSrc =
   //   props.data.img_src ?? `https://pipedream.com/s.v0/${props.data.id}/logo/48`
   return (
@@ -56,7 +55,7 @@ export function ControlApp({ app }: ControlAppProps) {
       Option: BaseOption,
     },
     styles: {
-      control: (base: {}) => ({
+      control: (base) => ({
         ...base,
         gridArea: "control",
         boxShadow: theme.boxShadow.input,
@@ -122,51 +121,51 @@ export function ControlApp({ app }: ControlAppProps) {
       app,
       ...formFieldCtx,
     })}>
-      {isLoadingAccounts ? (
+      {isLoadingAccounts ?
         `Loading ${app.name} accounts...`
-      ) : accounts.length ? (
-        <Select
-          instanceId={id}
-          value={selectValue}
-          options={[
-            ...accounts,
-            {
-              id: "_new",
-              name: `Connect new ${app.name} account...`,
-            },
-          ]}
-          {...selectProps}
-          required={true}
-          placeholder={`Select ${app.name} account...`}
-          isLoading={isLoadingAccounts}
-          isClearable={true}
-          isSearchable={true}
-          getOptionLabel={(a) => a.name}
-          getOptionValue={(a) => a.id}
-          onChange={(a) => {
-            if (a) {
-              if (a.id === "_new") {
+        : accounts.length ?
+          <Select
+            instanceId={id}
+            value={selectValue}
+            options={[
+              ...accounts,
+              {
+                id: "_new",
+                name: `Connect new ${app.name} account...`,
+              },
+            ]}
+            {...selectProps}
+            required={true}
+            placeholder={`Select ${app.name} account...`}
+            isLoading={isLoadingAccounts}
+            isClearable={true}
+            isSearchable={true}
+            getOptionLabel={(a) => a.name}
+            getOptionValue={(a) => a.id}
+            onChange={(a) => {
+              if (a) {
+                if (a.id === "_new") {
                 // start connect account and then select it, etc.
                 // TODO unset / put in loading state
-                startConnectAccount();
+                  startConnectAccount();
+                } else {
+                  onChange({
+                    authProvisionId: a.id,
+                  });
+                }
               } else {
-                onChange({
-                  authProvisionId: a.id,
-                });
+                onChange(undefined);
               }
-            } else {
-              onChange(undefined);
-            }
-          }}
-        />
-      ) : (
-        <button type="button" {...getProps("connectButton", baseStylesConnectButton, {
-          app,
-          ...formFieldCtx,
-        })} onClick={() => startConnectAccount()}>
+            }}
+          />
+          :
+          <button type="button" {...getProps("connectButton", baseStylesConnectButton, {
+            app,
+            ...formFieldCtx,
+          })} onClick={() => startConnectAccount()}>
           Connect {app.name}
-        </button>
-      )}
+          </button>
+      }
     </div>
   );
 }

packages/connect-react/src/components/ControlApp.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/ControlBoolean.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/ControlInput.tsx

@@ -26,7 +26,7 @@ export function ControlSelect<T>({
 
   const baseSelectProps: BaseReactSelectProps = {
     styles: {
-      container: (base: {}): CSSObjectWithLabel => ({
+      container: (base): CSSObjectWithLabel => ({
         ...base,
         gridArea: "control",
         boxShadow: theme.boxShadow.input,

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

@@ -2,15 +2,15 @@ import { Component } from "react";
 
 type Props = {
   children: React.ReactNode;
-  fallback: (err: any) => React.ReactNode;
+  fallback: (err: unknown) => React.ReactNode;
 };
 
 export class ErrorBoundary extends Component<Props> {
   state = {
     err: undefined,
   };
 
-  static getDerivedStateFromError(err: any) {
+  static getDerivedStateFromError(err: unknown) {
     return {
       err,
     };

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

@@ -1,17 +1,18 @@
 import { FormContext } from "../hooks/form-context";
 import type { FormFieldContext } from "../hooks/form-field-context";
-import { ConfigurableProp } from "@pipedream/sdk";
-
+import {
+  ConfigurableProp, ConfigurableProps,
+} from "@pipedream/sdk";
 import { useCustomize } from "../hooks/customization-context";
 import type { CSSProperties } from "react";
 
-export type ErrorsProps<T extends ConfigurableProp> = {
+export type ErrorsProps<T extends ConfigurableProps, U extends ConfigurableProp> = {
   errors: string[];
-  field: FormFieldContext<T>;
-  form: FormContext;
+  field: FormFieldContext<U>;
+  form: FormContext<T>;
 };
 
-export function Errors<T extends ConfigurableProp>(props: ErrorsProps<T>) {
+export function Errors<T extends ConfigurableProps, U extends ConfigurableProp>(props: ErrorsProps<T, U>) {
   const { errors } = props;
 
   const {
@@ -31,7 +32,7 @@ export function Errors<T extends ConfigurableProp>(props: ErrorsProps<T>) {
   // maybe that should just be handled by FormFieldContext instead of container?
   return (
     <ul {...getProps("errors", baseStyles, props)}>
-      {errors.map((msg) => <li {...getProps("error", baseStyles, props)}>{msg}</li>)}
+      {errors.map((msg) => <li key={msg} {...getProps("error", baseStyles, props)}>{msg}</li>)}
     </ul>
   );
 }