@dev-fastn-ai/react-core 2.4.9 → 2.4.12

package/README.md

@@ -24,7 +24,7 @@ Also, make sure you install the required **peer dependencies**:
 npm install react react-dom @tanstack/react-query
 ```
 
-> ✅ Requires React 18+
+> ✅ Requires React 18 or 19
 
 ---
 
@@ -292,7 +292,15 @@ interface HideOptionConfig {
   readonly enable: boolean;
   readonly hideBasedOnValue: boolean;
   readonly key: string;
-  readonly operation: "!=" | "==" | ">" | "<" | ">=" | "<=" | "contains" | "not_contains";
+  readonly operation:
+    | "!="
+    | "=="
+    | ">"
+    | "<"
+    | ">="
+    | "<="
+    | "contains"
+    | "not_contains";
   readonly value: string;
 }
 ```
@@ -315,14 +323,14 @@ const fieldConfig: ConnectorFieldConfig = {
     fileTypes: [],
     source: {
       flowId: "",
-      isSameProject: false
+      isSameProject: false,
     },
     destination: {
       flowId: "",
-      isSameProject: false
+      isSameProject: false,
     },
     isEditKeys: false,
-    isAddFields: false
+    isAddFields: false,
   },
   disable: false,
   label: "Select Workspace",
@@ -331,8 +339,8 @@ const fieldConfig: ConnectorFieldConfig = {
     hideBasedOnValue: false,
     key: "",
     operation: "!=",
-    value: ""
-  }
+    value: "",
+  },
 };
 
 // Example connector field with configuration
@@ -344,27 +352,23 @@ const connectorField: ConnectorField = {
   required: true,
   placeholder: "Select a workspace",
   description: "Choose the workspace to connect to",
-  configs: fieldConfig
+  configs: fieldConfig,
 };
 
 // Using the field in a React component
 function WorkspaceField({ field }: { field: ConnectorField }) {
   const { configs } = field;
-  
+
   // Access configuration properties
   const isSelectionEnabled = configs?.selection?.enable;
   const flowId = configs?.selection?.flowId;
   const isDisabled = configs?.disable;
-  
+
   return (
     <div className="field-container">
       <label>{field.label}</label>
-      {isSelectionEnabled && (
-        <p>Selection enabled for flow: {flowId}</p>
-      )}
-      <select disabled={isDisabled}>
-        {/* Field options */}
-      </select>
+      {isSelectionEnabled && <p>Selection enabled for flow: {flowId}</p>}
+      <select disabled={isDisabled}>{/* Field options */}</select>
     </div>
   );
 }
@@ -399,13 +403,13 @@ function ConnectorList() {
           <img src={connector.imageUri} alt={connector.name} />
           <h3>{connector.name}</h3>
           <p>{connector.description}</p>
-          
+
           {connector.status === "ACTIVE" && (
             <span className="status-badge connected">Connected</span>
           )}
-          
+
           {connector.actions?.map((action) => (
-            <button 
+            <button
               key={action.name}
               onClick={action.onClick}
               className={`action-btn ${action.actionType.toLowerCase()}`}
@@ -428,7 +432,11 @@ After a connector is activated, you can list its configurations:
 import { useConfigurations } from "@fastn-ai/react-core";
 
 function ConfigurationList({ configurationId }) {
-  const { data: configurations, isLoading, error } = useConfigurations({ configurationId });
+  const {
+    data: configurations,
+    isLoading,
+    error,
+  } = useConfigurations({ configurationId });
   const [selectedConfig, setSelectedConfig] = useState(null);
 
   if (isLoading) return <div>Loading configurations...</div>;
@@ -446,21 +454,27 @@ function ConfigurationList({ configurationId }) {
               <p>{config.description}</p>
             </div>
           </div>
-          
+
           <div className="config-actions">
             {config.status === "ENABLED" && (
               <span className="status-badge enabled">Active</span>
             )}
-            
+
             {config.actions?.map((action) => (
               <button
                 key={action.name}
                 onClick={async () => {
                   const result = await action.onClick();
-                  if (action.actionType === "ENABLE" && result?.status === "SUCCESS") {
+                  if (
+                    action.actionType === "ENABLE" &&
+                    result?.status === "SUCCESS"
+                  ) {
                     // Show configuration form for new setup
                     setSelectedConfig(config);
-                  } else if (action.actionType === "UPDATE" && result?.status === "SUCCESS") {
+                  } else if (
+                    action.actionType === "UPDATE" &&
+                    result?.status === "SUCCESS"
+                  ) {
                     // Show configuration form for editing
                     setSelectedConfig(config);
                   }
@@ -473,9 +487,9 @@ function ConfigurationList({ configurationId }) {
           </div>
         </div>
       ))}
-      
+
       {selectedConfig && (
-        <ConfigurationForm 
+        <ConfigurationForm
           configurationId={selectedConfig.id}
           onClose={() => setSelectedConfig(null)}
         />
@@ -522,7 +536,7 @@ function ConfigurationForm({ configurationId, onClose }) {
   const onSubmit = async (e) => {
     e.preventDefault();
     setIsSubmitting(true);
-    
+
     try {
       await handleSubmit({ formData });
       console.log("Configuration saved successfully!");
@@ -539,9 +553,9 @@ function ConfigurationForm({ configurationId, onClose }) {
       <form onSubmit={onSubmit} className="configuration-form">
         <h2>Configure {configurationForm.name}</h2>
         <p>{configurationForm.description}</p>
-        
+
         {configurationForm.fields.map((field) => (
-          <FormField 
+          <FormField
             key={field.key}
             field={field}
             value={formData[field.key]}
@@ -550,9 +564,11 @@ function ConfigurationForm({ configurationId, onClose }) {
             }
           />
         ))}
-        
+
         <div className="form-actions">
-          <button type="button" onClick={onClose}>Cancel</button>
+          <button type="button" onClick={onClose}>
+            Cancel
+          </button>
           <button type="submit" disabled={isSubmitting}>
             {isSubmitting ? "Saving..." : "Save Configuration"}
           </button>
@@ -678,27 +694,27 @@ The form fields handle different value types based on the field type:
 const formData = {
   // Select field - single object
   channel: { label: "General", value: "C123456" },
-  
+
   // Multi-select field - array of objects
   channels: [
     { label: "General", value: "C123456" },
-    { label: "Random", value: "C789012" }
+    { label: "Random", value: "C789012" },
   ],
-  
+
   // Google Drive picker - single object
   folder: { label: "My Documents", value: "folder_id_123" },
-  
+
   // Google Drive picker multi - array of objects
   files: [
     { label: "document1.pdf", value: "file_id_1" },
-    { label: "document2.pdf", value: "file_id_2" }
+    { label: "document2.pdf", value: "file_id_2" },
   ],
-  
+
   // Text field - primitive
   webhookUrl: "https://hooks.slack.com/...",
-  
+
   // Boolean field - primitive
-  enableNotifications: true
+  enableNotifications: true,
 };
 ```
 
@@ -713,7 +729,13 @@ For fields of type `select` or `multi-select`, use the `useFieldOptions` hook to
 ```tsx
 import { useFieldOptions } from "@fastn-ai/react-core";
 
-function SelectField({ field, value, onChange, isMulti = false, context = {} }) {
+function SelectField({
+  field,
+  value,
+  onChange,
+  isMulti = false,
+  context = {},
+}) {
   // context contains all form values and is used to fetch dependent options
   const {
     options,
@@ -737,17 +759,19 @@ function SelectField({ field, value, onChange, isMulti = false, context = {} })
   function handleSelectChange(selectedOptions) {
     if (isMulti) {
       // For multi-select, value should be an array of { label, value } objects
-      const selectedValues = selectedOptions.map(option => ({
+      const selectedValues = selectedOptions.map((option) => ({
         label: option.label,
-        value: option.value
+        value: option.value,
       }));
       onChange(selectedValues);
     } else {
       // For single select, value should be a single { label, value } object
-      const selectedValue = selectedOptions[0] ? {
-        label: selectedOptions[0].label,
-        value: selectedOptions[0].value
-      } : null;
+      const selectedValue = selectedOptions[0]
+        ? {
+            label: selectedOptions[0].label,
+            value: selectedOptions[0].value,
+          }
+        : null;
       onChange(selectedValue);
     }
   }
@@ -758,13 +782,13 @@ function SelectField({ field, value, onChange, isMulti = false, context = {} })
         {field.label}
         {field.required && <span className="required"> *</span>}
       </label>
-      
+
       {error && (
         <div className="error-message">
           Error loading options: {error.message}
         </div>
       )}
-      
+
       <input
         type="text"
         placeholder={field.placeholder || `Search ${field.label}`}
@@ -772,19 +796,23 @@ function SelectField({ field, value, onChange, isMulti = false, context = {} })
         disabled={loading}
         className="search-input"
       />
-      
+
       <select
         multiple={isMulti}
-        value={isMulti ? (value || []).map(v => v.value) : (value?.value || '')}
+        value={isMulti ? (value || []).map((v) => v.value) : value?.value || ""}
         onChange={(e) => {
           if (isMulti) {
-            const selectedOptions = Array.from(e.target.selectedOptions).map(option => {
-              const opt = options.find(o => o.value === option.value);
-              return { label: opt.label, value: opt.value };
-            });
+            const selectedOptions = Array.from(e.target.selectedOptions).map(
+              (option) => {
+                const opt = options.find((o) => o.value === option.value);
+                return { label: opt.label, value: opt.value };
+              }
+            );
             handleSelectChange(selectedOptions);
           } else {
-            const selectedOption = options.find(o => o.value === e.target.value);
+            const selectedOption = options.find(
+              (o) => o.value === e.target.value
+            );
             handleSelectChange(selectedOption ? [selectedOption] : []);
           }
         }}
@@ -797,9 +825,9 @@ function SelectField({ field, value, onChange, isMulti = false, context = {} })
           </option>
         ))}
       </select>
-      
+
       {loading && <div className="loading">Loading options...</div>}
-      
+
       {hasNext && !loadingMore && (
         <button
           type="button"
@@ -809,13 +837,13 @@ function SelectField({ field, value, onChange, isMulti = false, context = {} })
           Load More
         </button>
       )}
-      
+
       {loadingMore && <div className="loading">Loading more...</div>}
-      
+
       <div className="options-info">
         Loaded {totalLoadedOptions} options{hasNext ? "" : " (all loaded)"}
       </div>
-      
+
       {field.description && (
         <div className="field-description">{field.description}</div>
       )}
@@ -829,23 +857,29 @@ function SelectField({ field, value, onChange, isMulti = false, context = {} })
 For Google Drive file picker fields, handle the file selection flow. These fields also work with `{ label, value }` objects and support file type filtering:
 
 ```tsx
-function GoogleFilesPickerField({ field, value, onChange, isMulti = false, context = {} }) {
+function GoogleFilesPickerField({
+  field,
+  value,
+  onChange,
+  isMulti = false,
+  context = {},
+}) {
   async function handlePickFiles() {
     if (field.optionsSource?.openGoogleFilesPicker) {
       await field.optionsSource.openGoogleFilesPicker({
         onComplete: async (files) => {
           if (isMulti) {
             // For multi-select, ensure we have an array of { label, value } objects
-            const formattedFiles = files.map(file => ({
+            const formattedFiles = files.map((file) => ({
               label: file.label || file.name || file.value,
-              value: file.value || file.id
+              value: file.value || file.id,
             }));
             onChange(formattedFiles);
           } else {
             // For single select, ensure we have a single { label, value } object
             const formattedFile = {
               label: files[0]?.label || files[0]?.name || files[0]?.value,
-              value: files[0]?.value || files[0]?.id
+              value: files[0]?.value || files[0]?.id,
             };
             onChange(formattedFile);
           }
@@ -865,15 +899,15 @@ function GoogleFilesPickerField({ field, value, onChange, isMulti = false, conte
         {field.label}
         {field.required && <span className="required"> *</span>}
       </label>
-      
-      <button 
-        type="button" 
+
+      <button
+        type="button"
         onClick={handlePickFiles}
         className="google-picker-btn"
       >
         Pick from Google Drive
       </button>
-      
+
       {value && (
         <div className="selected-files">
           <strong>Selected file{isMulti ? "s" : ""}:</strong>
@@ -884,7 +918,7 @@ function GoogleFilesPickerField({ field, value, onChange, isMulti = false, conte
           </ul>
         </div>
       )}
-      
+
       {field.description && (
         <div className="field-description">{field.description}</div>
       )}
@@ -923,7 +957,7 @@ function FormField({ field, value, onChange, context = {} }) {
           )}
         </div>
       );
-      
+
     case "checkbox":
       return (
         <div className="field-container">
@@ -943,51 +977,51 @@ function FormField({ field, value, onChange, context = {} }) {
           )}
         </div>
       );
-      
+
     case "select":
       return (
-        <SelectField 
-          field={field} 
-          value={value} 
-          onChange={onChange} 
+        <SelectField
+          field={field}
+          value={value}
+          onChange={onChange}
           isMulti={false}
           context={context}
         />
       );
-      
+
     case "multi-select":
       return (
-        <SelectField 
-          field={field} 
-          value={value} 
-          onChange={onChange} 
+        <SelectField
+          field={field}
+          value={value}
+          onChange={onChange}
           isMulti={true}
           context={context}
         />
       );
-      
+
     case "google-files-picker-select":
       return (
-        <GoogleFilesPickerField 
-          field={field} 
-          value={value} 
-          onChange={onChange} 
+        <GoogleFilesPickerField
+          field={field}
+          value={value}
+          onChange={onChange}
           isMulti={false}
           context={context}
         />
       );
-      
+
     case "google-files-picker-multi-select":
       return (
-        <GoogleFilesPickerField 
-          field={field} 
-          value={value} 
-          onChange={onChange} 
+        <GoogleFilesPickerField
+          field={field}
+          value={value}
+          onChange={onChange}
           isMulti={true}
           context={context}
         />
       );
-      
+
     default:
       return (
         <div className="field-container">
@@ -1022,17 +1056,18 @@ Here's how to implement context passing in your form components:
 import { useConfigurationForm } from "@fastn-ai/react-core";
 
 function ConfigurationForm({ configurationId, connectorId, configuration }) {
-  const { data: configurationForm, isLoading, error } = useConfigurationForm({
+  const {
+    data: configurationForm,
+    isLoading,
+    error,
+  } = useConfigurationForm({
     configurationId,
     connectorId,
     configuration,
   });
 
   return (
-    <Formik
-      initialValues={initialValues}
-      onSubmit={handleSubmit}
-    >
+    <Formik initialValues={initialValues} onSubmit={handleSubmit}>
       {({ values, setFieldValue, setFieldTouched, errors, touched }) => (
         <Form>
           {configurationForm.fields
@@ -1156,7 +1191,9 @@ function MultiLevelSelectForm() {
       <SelectField
         field={workspaceField}
         value={formValues.workspace}
-        onChange={(value) => setFormValues(prev => ({ ...prev, workspace: value }))}
+        onChange={(value) =>
+          setFormValues((prev) => ({ ...prev, workspace: value }))
+        }
         context={formValues}
       />
 
@@ -1164,7 +1201,9 @@ function MultiLevelSelectForm() {
       <SelectField
         field={channelField}
         value={formValues.channel}
-        onChange={(value) => setFormValues(prev => ({ ...prev, channel: value }))}
+        onChange={(value) =>
+          setFormValues((prev) => ({ ...prev, channel: value }))
+        }
         context={formValues} // Has access to workspace value
       />
 
@@ -1172,7 +1211,9 @@ function MultiLevelSelectForm() {
       <SelectField
         field={userField}
         value={formValues.user}
-        onChange={(value) => setFormValues(prev => ({ ...prev, user: value }))}
+        onChange={(value) =>
+          setFormValues((prev) => ({ ...prev, user: value }))
+        }
         context={formValues} // Has access to both workspace and channel values
       />
     </div>
@@ -1225,7 +1266,6 @@ function ConnectorManager() {
 }
 ```
 
-
 ```tsx
 function ConfigurationActions({ config }) {
   const queryClient = useQueryClient();
@@ -1273,6 +1313,7 @@ function ConfigurationActions({ config }) {
 ```
 
 ---
+
 ## 🚨 Troubleshooting
 
 ### **Common Issues**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dev-fastn-ai/react-core",
-  "version": "2.4.9",
+  "version": "2.4.12",
   "description": "React hooks and components for integrating Fastn AI connector marketplace into your applications. Built on top of @fastn-ai/core with React Query for optimal performance.",
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.js",
@@ -66,15 +66,15 @@
   },
   "peerDependencies": {
     "@tanstack/react-query": "^5.0.0",
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0"
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
   },
   "devDependencies": {
     "@rollup/plugin-commonjs": "^28.0.1",
     "@rollup/plugin-json": "^6.1.0",
     "@rollup/plugin-node-resolve": "^15.3.0",
     "@types/node": "^20.11.24",
-    "@types/react": "^18.0.29",
+    "@types/react": "^18.0.29 || ^19.0.0",
     "@types/react-dom": "^18.0.11",
     "rimraf": "^5.0.5",
     "rollup": "^4.12.0",