Add isDevelopment flag to context

Author: bzwrk

packages/connect-react/examples/nextjs/package.json

@@ -7,7 +7,7 @@
   },
   "dependencies": {
     "@pipedream/connect-react": "file:../..",
-    "@pipedream/sdk": "^1.1.4",
+    "@pipedream/sdk": "^1.3.2",
     "next": "15.0.3",
     "react": "19.0.0-rc-66855b96-20241106",
     "react-dom": "19.0.0-rc-66855b96-20241106"

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

@@ -27,8 +27,8 @@ export default function Home() {
   ] = useState<string | undefined>();
 
   const [
-    errors,
-    setErrors,
+    sdkErrors,
+    setSdkErrors,
   ] = useState<unknown[] | unknown | undefined>(undefined);
 
   const handleDynamicProps = (dynamicProps: { id: string | undefined }) => {
@@ -45,18 +45,19 @@ export default function Home() {
           configuredProps={configuredProps}
           onUpdateDynamicProps={handleDynamicProps}
           onUpdateConfiguredProps={setConfiguredProps}
-          sdkErrors={errors}
+          sdkErrors={sdkErrors}
+          environment={client.getEnvironment()}
           onSubmit={async () => {
             try {
-              const result = await client.actionRun({
+              const result = await client.runAction({
                 userId,
                 actionId: "gmail-new-email-received",
                 configuredProps,
                 dynamicPropsId,
               });
-              setErrors(result?.os)
+              setSdkErrors(result?.os)
             } catch (error) {
-              setErrors(error as unknown)
+              setSdkErrors(error as unknown)
               console.error("Action run failed:", error);
             }
           }}

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

@@ -21,6 +21,7 @@ export type ComponentFormProps<T extends ConfigurableProps, U = ConfiguredProps<
   onUpdateDynamicProps?: (dp: DynamicProps<T>) => void;
   hideOptionalProps?: boolean;
   sdkErrors?: unknown[] | unknown | undefined;
+  environment?: string;
 };
 
 export function ComponentForm<T extends ConfigurableProps>(props: ComponentFormProps<T>) {

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

@@ -21,7 +21,9 @@ export function Field<T extends ConfigurableProp>(props: FieldProps<T>) {
   const {
     form, field,
   } = props;
-  const { prop } = field;
+  const {
+    prop, isDevelopment,
+  } = field;
   const {
     getProps, getComponents,
   } = useCustomize();
@@ -63,7 +65,7 @@ export function Field<T extends ConfigurableProp>(props: FieldProps<T>) {
       <Label text={labelText} field={field} form={form} />
       <Control field={field} form={form} />
       <Description markdown={prop.description} field={field} form={form} />
-      <Errors field={field} form={form} />
+      { isDevelopment && <Errors field={field} form={form} /> }
     </div>
   );
 }

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

@@ -27,6 +27,7 @@ export function InternalComponentForm() {
     setSubmitting,
     sdkErrors: __sdkErrors,
     submitting,
+    isDevelopment,
   } = formContext;
 
   const {
@@ -158,7 +159,7 @@ export function InternalComponentForm() {
               </div>
             </div>
             : null}
-          { sdkErrors?.map((e, idx) => <Alert prop={e} key={idx}/>)}
+          { isDevelopment && sdkErrors?.map((e, idx) => <Alert prop={e} key={idx}/>)}
           {onSubmit && <ControlSubmit form={formContext} />}
         </form>
       </Suspense>

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

@@ -15,7 +15,7 @@ export function InternalField<T extends ConfigurableProp>({
 }: FieldInternalProps<T>) {
   const formCtx = useFormContext();
   const {
-    id: formId, configuredProps, registerField, setConfiguredProp, errors,
+    id: formId, configuredProps, registerField, setConfiguredProp, errors, isDevelopment,
   } = formCtx;
 
   const appSlug = prop.type === "app" && "app" in prop
@@ -45,6 +45,7 @@ export function InternalField<T extends ConfigurableProp>({
       app, // XXX fix ts
     },
     errors,
+    isDevelopment,
   };
   useEffect(() => registerField(fieldCtx), [
     fieldCtx,

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

@@ -38,6 +38,7 @@ export type FormContext<T extends ConfigurableProps> = {
   setSubmitting: (submitting: boolean) => void;
   submitting: boolean;
   userId: string;
+  isDevelopment: boolean;
 };
 
 export const skippablePropTypes = [
@@ -74,7 +75,7 @@ export const FormContextProvider = <T extends ConfigurableProps>({
   const id = useId();
 
   const {
-    component, configuredProps: __configuredProps, propNames, userId, sdkErrors: __sdkErrors,
+    component, configuredProps: __configuredProps, propNames, userId, sdkErrors: __sdkErrors, environment,
   } = formProps;
   const componentId = component.key;
 
@@ -100,6 +101,11 @@ export const FormContextProvider = <T extends ConfigurableProps>({
     setSdkErrors,
   ] = useState<Record<string, string>[]>([])
 
+  const [
+    isDevelopment,
+    setIsDevelopment,
+  ] = useState<boolean>(environment === "development")
+
   const [
     enabledOptionalProps,
     setEnabledOptionalProps,
@@ -448,6 +454,7 @@ export const FormContextProvider = <T extends ConfigurableProps>({
     setSubmitting,
     submitting,
     sdkErrors,
+    isDevelopment,
   };
   return <FormContext.Provider value={value}>{children}</FormContext.Provider>;
 };

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

@@ -17,6 +17,7 @@ export type FormFieldContext<T extends ConfigurableProp> = {
   onChange: (value: PropValue<T["type"]> | undefined) => void;
   extra: FormFieldContextExtra<T>;
   errors: Record<string, string[]>;
+  isDevelopment: boolean;
 };
 
 export const FormFieldContext = createContext<FormFieldContext<any /* XXX fix */> | undefined>(undefined); // eslint-disable-line @typescript-eslint/no-explicit-any