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

Author: dylburger

eslint.config.mjs

@@ -276,6 +276,7 @@ export default [
     },
 
     rules: {
+      "no-undef": "error", // XXX maybe lift this higher (not just ts)
       "@typescript-eslint/no-unused-vars": [
         "error",
         {
@@ -288,14 +289,20 @@ export default [
   },
   ...compat.extends("plugin:react/recommended").map((config) => ({
     ...config,
+    files: [
+      "**/*.tsx",
+    ],
+    languageOptions: {
+      globals: {
+        HTMLFormElement: "readonly",
+        HTMLInputElement: "readonly",
+      },
+    },
     settings: {
       react: {
         version: "detect",
       },
     },
-    files: [
-      "**/*.tsx",
-    ],
   })),
   {
     files: [

packages/connect-react/examples/nextjs/src/app/layout.tsx

@@ -1,3 +1,5 @@
+import type React from "react"
+
 export default function RootLayout({ children }: Readonly<{
   children: React.ReactNode;
 }>) {

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

@@ -1,4 +1,4 @@
-import { ConfigurablePropBoolean } from "@pipedream/sdk";
+import type { ConfigurablePropBoolean } from "@pipedream/sdk";
 import { useFormFieldContext } from "../hooks/form-field-context";
 import { useCustomize } from "../hooks/customization-context";
 import type { CSSProperties } from "react";
@@ -15,5 +15,5 @@ export function ControlBoolean() {
     gridArea: "control",
     margin: "0 0.5rem 0 0",
   };
-  return <input id={id} type="checkbox" {...getProps("controlBoolean", baseStyles, props)} checked={value ?? false} onChange={(e) => onChange(e.target.checked)} />;
+  return <input id={id} type="checkbox" {...getProps("controlBoolean", baseStyles, formFieldContextProps)} checked={value ?? false} onChange={(e) => onChange(e.target.checked)} />;
 }

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

@@ -1,8 +1,10 @@
-import { Component } from "react";
+import {
+  Component, type ReactNode,
+} from "react";
 
 type Props = {
-  children: React.ReactNode;
-  fallback: (err: unknown) => React.ReactNode;
+  children: ReactNode;
+  fallback: (err: unknown) => ReactNode;
 };
 
 export class ErrorBoundary extends Component<Props> {

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

@@ -8,7 +8,7 @@ import { InternalField } from "./InternalField";
 import { Alert } from "./Alert";
 import { ErrorBoundary } from "./ErrorBoundary";
 import { ControlSubmit } from "./ControlSubmit";
-import { ConfigurableProp } from "@pipedream/sdk";
+import type { ConfigurableProp } from "@pipedream/sdk";
 
 export function InternalComponentForm() {
   const formContext = useFormContext();
@@ -93,7 +93,9 @@ export function InternalComponentForm() {
   return (
     <ErrorBoundary fallback={(err) => <p style={{
       color: "red",
-    }}>Error: {err.message}</p>}>
+    }}>Error: {err && typeof err === "object" && "message" in err && typeof err.message === "string"
+        ? err.message
+        : "Unknown"}</p>}>
       <Suspense fallback={<p>Loading form...</p>}>
         <form {...getProps("componentForm", baseStyles, formContextProps)} onSubmit={_onSubmit}>
           {shownProps.map(([

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

@@ -1,5 +1,5 @@
 import {
-  createContext, useContext,
+  createContext, useContext, type ReactNode,
 } from "react";
 import type {
   ComponentProps, CSSProperties, JSXElementConstructor,
@@ -271,6 +271,6 @@ export function useCustomize(): Customization {
 export const CustomizeProvider = ({
   children,
   ...customizationProps
-}: CustomizationConfig<any, any, any> & { children: React.ReactNode; }) => { // eslint-disable-line @typescript-eslint/no-explicit-any
+}: CustomizationConfig<any, any, any> & { children: 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

@@ -1,5 +1,5 @@
 import {
-  createContext, useContext, useEffect, useId, useState,
+  createContext, useContext, useEffect, useId, useState, type ReactNode,
 } from "react";
 import isEqual from "lodash.isequal";
 import { useQuery } from "@tanstack/react-query";
@@ -43,7 +43,7 @@ export const useFormContext = () => {
 };
 
 type FormContextProviderProps<T extends ConfigurableProps> = {
-  children: React.ReactNode;
+  children: ReactNode;
 } & {
   props: ComponentFormProps<T>;
 };

packages/connect-react/src/hooks/frontend-client-context.tsx

@@ -1,5 +1,5 @@
 import {
-  createContext, useContext,
+  createContext, useContext, type ReactNode, type FC,
 } from "react";
 import {
   QueryClient, QueryClientProvider,
@@ -20,9 +20,9 @@ export const useFrontendClient = () => {
   return context;
 };
 
-type FrontendClientProviderProps = { children: React.ReactNode; client: BrowserClient; };
+type FrontendClientProviderProps = { children: ReactNode; client: BrowserClient; };
 
-export const FrontendClientProvider: React.FC<FrontendClientProviderProps> = ({
+export const FrontendClientProvider: FC<FrontendClientProviderProps> = ({
   children,
   client,
 }: FrontendClientProviderProps) => {