@algodomain/smart-forms 0.1.1 → 0.1.3

package/LICENSE

@@ -20,3 +20,6 @@ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 SOFTWARE.
 
+
+
+

package/README.md

@@ -35,6 +35,7 @@ Built with TypeScript, Tailwind CSS, Zod validation, and shadcn/ui components.
 - 🔄 **API Integration** - Automatic form submission with authentication support
 - 🔗 **Query Params** - Include URL query parameters in form submissions
 - 💾 **Auto-Save** - LocalStorage support for draft saving
+- 🎛️ **Conditional Disabling** - Disable fields and submit buttons based on form data
 - 🎨 **Customizable** - Full theme control via CSS variables
 - 🌙 **Dark Mode** - Built-in support for light and dark themes
 - ♿ **Accessible** - Built on Radix UI primitives
@@ -479,6 +480,7 @@ All form components (`SmartForm`, `MultiTabSmartForm`, `BaseSmartForm`) support
 | `authentication` | `AuthenticationConfig` | - | Authentication configuration |
 | `includeQueryParams` | `boolean` | `false` | Include URL query parameters |
 | `queryParamsToInclude` | `string[]` | - | Filter specific query params |
+| `submitDisabled` | `boolean \| ((formData: any) => boolean)` | `false` | Disable submit button statically or conditionally based on form data |
 | `children` | `ReactNode` | - | Form content |
 
 ### Authentication Configuration
@@ -522,6 +524,8 @@ All field components support these props:
 | `className` | `string` | - | Custom CSS class |
 | `info` | `string` | - | Info tooltip text |
 | `subLabel` | `string` | - | Additional helper text |
+| `disabled` | `boolean \| ((formData: any) => boolean)` | `false` | Disable field statically or conditionally based on form data |
+| `hidden` | `boolean \| ((formData: any) => boolean)` | `false` | Hide field conditionally based on form data |
 
 ### Field-Specific Props
 
@@ -594,6 +598,237 @@ All field components support these props:
 
 ## 🚀 Advanced Features
 
+### Conditional Field Disabling
+
+Disable fields or submit buttons based on form data values. Supports both static boolean values and dynamic functions.
+
+#### Disable Fields Conditionally
+
+**Static Disable:**
+```tsx
+<SmartInput
+  field="username"
+  label="Username"
+  disabled={true}
+/>
+```
+
+**Conditional Disable Based on Form Data:**
+```tsx
+<SmartForm api="/api/submit">
+  <SmartCombobox
+    field="country"
+    label="Country"
+    options={[
+      { value: 'us', label: 'United States' },
+      { value: 'ca', label: 'Canada' }
+    ]}
+    placeholder="Please select the country"
+  />
+  
+  <SmartCombobox
+    field="state"
+    label="State"
+    options={stateOptions}
+    disabled={(formData) => !formData.country || formData.country === ""}
+  />
+  
+  <SmartInput
+    field="zipCode"
+    label="Zip Code"
+    disabled={(formData) => !formData.state}
+  />
+</SmartForm>
+```
+
+**How it works:**
+- The `disabled` function receives the current `formData` object
+- It re-evaluates automatically when form data changes
+- Returns `true` to disable, `false` to enable
+- Empty strings, `null`, and `undefined` are all falsy in JavaScript
+
+**Example: Disable until checkbox is checked:**
+```tsx
+<SmartForm api="/api/submit">
+  <SmartCheckbox
+    field="agreeToTerms"
+    label="I agree to the terms and conditions"
+  />
+  
+  <SmartInput
+    field="comments"
+    label="Additional Comments"
+    disabled={(formData) => !formData.agreeToTerms}
+  />
+</SmartForm>
+```
+
+**Example: Complex conditional logic:**
+```tsx
+<SmartInput
+  field="phone"
+  label="Phone Number"
+  disabled={(formData) => {
+    // Disable if email is not provided OR if user is under 18
+    return !formData.email || (formData.age && formData.age < 18)
+  }}
+/>
+```
+
+#### Disable Submit Button Conditionally
+
+**Static Disable:**
+```tsx
+<SmartForm
+  api="/api/submit"
+  submitDisabled={true}
+>
+  {/* Fields */}
+</SmartForm>
+```
+
+**Conditional Disable:**
+```tsx
+<SmartForm
+  api="/api/submit"
+  submitDisabled={(formData) => !formData.agreeToTerms}
+>
+  <SmartInput field="name" label="Name" required />
+  <SmartCheckbox
+    field="agreeToTerms"
+    label="I agree to the terms"
+  />
+</SmartForm>
+```
+
+**Example: Disable submit until all required fields are filled:**
+```tsx
+<SmartForm
+  api="/api/submit"
+  submitDisabled={(formData) => {
+    return !formData.name || !formData.email || !formData.agreeToTerms
+  }}
+>
+  <SmartInput field="name" label="Name" required />
+  <SmartInput field="email" label="Email" required />
+  <SmartCheckbox field="agreeToTerms" label="I agree" required />
+</SmartForm>
+```
+
+**Note:** The submit button is automatically disabled when `isLoading` is `true`. The `submitDisabled` prop is combined with the loading state: `disabled={isLoading || isSubmitDisabled}`.
+
+#### Combining Disabled and Hidden
+
+You can use both `disabled` and `hidden` together for different scenarios:
+
+```tsx
+<SmartForm api="/api/submit">
+  <SmartSelect
+    field="userType"
+    label="User Type"
+    options={[
+      { value: 'admin', label: 'Admin' },
+      { value: 'user', label: 'User' }
+    ]}
+  />
+  
+  {/* Hidden for non-admin users */}
+  <SmartInput
+    field="adminCode"
+    label="Admin Code"
+    hidden={(formData) => formData.userType !== 'admin'}
+  />
+  
+  {/* Disabled (but visible) for admin users */}
+  <SmartInput
+    field="userNotes"
+    label="User Notes"
+    disabled={(formData) => formData.userType === 'admin'}
+  />
+</SmartForm>
+```
+
+#### Hide Fields Conditionally
+
+Hide fields completely from the form based on form data. When a field is hidden, it's not rendered at all (unlike `disabled` which shows the field but makes it non-interactive).
+
+**Static Hide:**
+```tsx
+<SmartInput
+  field="optionalField"
+  label="Optional Field"
+  hidden={true}
+/>
+```
+
+**Conditional Hide:**
+```tsx
+<SmartForm api="/api/submit">
+  <SmartSelect
+    field="accountType"
+    label="Account Type"
+    options={[
+      { value: 'personal', label: 'Personal' },
+      { value: 'business', label: 'Business' }
+    ]}
+  />
+  
+  {/* Only show business fields when account type is business */}
+  <SmartInput
+    field="businessName"
+    label="Business Name"
+    hidden={(formData) => formData.accountType !== 'business'}
+  />
+  
+  <SmartInput
+    field="taxId"
+    label="Tax ID"
+    hidden={(formData) => formData.accountType !== 'business'}
+  />
+</SmartForm>
+```
+
+**Example: Show/hide based on checkbox:**
+```tsx
+<SmartForm api="/api/submit">
+  <SmartCheckbox
+    field="hasSpecialRequirements"
+    label="I have special requirements"
+  />
+  
+  <SmartInput
+    field="specialRequirements"
+    label="Please describe your requirements"
+    type="textarea"
+    hidden={(formData) => !formData.hasSpecialRequirements}
+  />
+</SmartForm>
+```
+
+**Difference between `disabled` and `hidden`:**
+- `disabled`: Field is visible but grayed out and non-interactive
+- `hidden`: Field is completely removed from the DOM (not rendered)
+
+**When to use each:**
+- Use `disabled` when you want to show the field exists but is temporarily unavailable
+- Use `hidden` when you want to completely hide fields that aren't relevant to the current form state
+
+#### All Supported Components
+
+Both `disabled` and `hidden` props are available on all smart field components:
+- `SmartInput`
+- `SmartSelect`
+- `SmartCombobox`
+- `SmartCheckbox`
+- `SmartRadioGroup`
+- `SmartDatePicker`
+- `SmartSlider`
+- `SmartDualRangeSlider`
+- `SmartTags`
+- `SmartFileUpload`
+- `SmartAutoSuggestTags`
+- `SmartBasicRichTextbox`
+
 ### Query Parameters
 
 Automatically include URL query parameters in form submissions.
@@ -843,6 +1078,7 @@ export function RegistrationForm() {
       api="https://api.example.com/register"
       method="POST"
       submitButtonText="Register"
+      submitDisabled={(formData) => !formData.agreeToTerms}
       onSuccess={(data) => {
         toast.success('Account created successfully!')
       }}
@@ -871,6 +1107,13 @@ export function RegistrationForm() {
         required
       />
       
+      <SmartSelect
+        field="state"
+        label="State"
+        options={stateOptions}
+        disabled={(formData) => !formData.country}
+      />
+      
       <SmartDatePicker
         field="birthDate"
         label="Date of Birth"

package/dist/{SmartFormProvider-DyJoDBjQ.d.cts → SmartFormProvider-BdyRQakk.d.cts}

@@ -57,6 +57,7 @@ interface FormConfig {
     authentication?: AuthenticationConfig;
     includeQueryParams?: boolean;
     queryParamsToInclude?: string[];
+    submitDisabled?: boolean | ((formData: any) => boolean);
 }
 interface FormContextType {
     formData: any;

package/dist/{SmartFormProvider-DyJoDBjQ.d.ts → SmartFormProvider-BdyRQakk.d.ts}

@@ -57,6 +57,7 @@ interface FormConfig {
     authentication?: AuthenticationConfig;
     includeQueryParams?: boolean;
     queryParamsToInclude?: string[];
+    submitDisabled?: boolean | ((formData: any) => boolean);
 }
 interface FormContextType {
     formData: any;

package/dist/{SmartTags-HmvmCJPT.d.cts → SmartTags-DPqw9PG1.d.cts}

@@ -11,6 +11,8 @@ interface SmartInputProps {
     defaultValue?: any;
     info?: string;
     subLabel?: string;
+    disabled?: boolean | ((formData: any) => boolean);
+    hidden?: boolean | ((formData: any) => boolean);
 }
 declare const SmartInput: React__default.FC<SmartInputProps>;
 
@@ -23,6 +25,8 @@ interface SmartCheckboxProps {
     defaultValue?: boolean;
     info?: string;
     subLabel?: string;
+    disabled?: boolean | ((formData: any) => boolean);
+    hidden?: boolean | ((formData: any) => boolean);
 }
 declare const SmartCheckbox: React__default.FC<SmartCheckboxProps>;
 
@@ -42,6 +46,8 @@ interface SmartRadioGroupProps {
     defaultValue?: string;
     info?: string;
     subLabel?: string;
+    disabled?: boolean | ((formData: any) => boolean);
+    hidden?: boolean | ((formData: any) => boolean);
 }
 declare const SmartRadioGroup: React__default.FC<SmartRadioGroupProps>;
 
@@ -60,6 +66,8 @@ interface SmartSelectProps {
     defaultValue?: string;
     info?: string;
     subLabel?: string;
+    disabled?: boolean | ((formData: any) => boolean);
+    hidden?: boolean | ((formData: any) => boolean);
 }
 declare const SmartSelect: React__default.FC<SmartSelectProps>;
 
@@ -85,6 +93,8 @@ interface SmartDatePickerProps {
     defaultValue?: Date | string;
     info?: string;
     subLabel?: string;
+    disabled?: boolean | ((formData: any) => boolean);
+    hidden?: boolean | ((formData: any) => boolean);
 }
 declare const SmartDatePicker: React__default.FC<SmartDatePickerProps>;
 
@@ -100,7 +110,8 @@ interface SmartTagsProps {
     maxLength?: number;
     minLength?: number;
     allowDuplicates?: boolean;
-    disabled?: boolean;
+    disabled?: boolean | ((formData: any) => boolean);
+    hidden?: boolean | ((formData: any) => boolean);
     onTagAdd?: (tagText: string) => void;
     onTagRemove?: (tagText: string) => void;
     info?: string;

package/dist/{SmartTags-HmvmCJPT.d.ts → SmartTags-DPqw9PG1.d.ts}

@@ -11,6 +11,8 @@ interface SmartInputProps {
     defaultValue?: any;
     info?: string;
     subLabel?: string;
+    disabled?: boolean | ((formData: any) => boolean);
+    hidden?: boolean | ((formData: any) => boolean);
 }
 declare const SmartInput: React__default.FC<SmartInputProps>;
 
@@ -23,6 +25,8 @@ interface SmartCheckboxProps {
     defaultValue?: boolean;
     info?: string;
     subLabel?: string;
+    disabled?: boolean | ((formData: any) => boolean);
+    hidden?: boolean | ((formData: any) => boolean);
 }
 declare const SmartCheckbox: React__default.FC<SmartCheckboxProps>;
 
@@ -42,6 +46,8 @@ interface SmartRadioGroupProps {
     defaultValue?: string;
     info?: string;
     subLabel?: string;
+    disabled?: boolean | ((formData: any) => boolean);
+    hidden?: boolean | ((formData: any) => boolean);
 }
 declare const SmartRadioGroup: React__default.FC<SmartRadioGroupProps>;
 
@@ -60,6 +66,8 @@ interface SmartSelectProps {
     defaultValue?: string;
     info?: string;
     subLabel?: string;
+    disabled?: boolean | ((formData: any) => boolean);
+    hidden?: boolean | ((formData: any) => boolean);
 }
 declare const SmartSelect: React__default.FC<SmartSelectProps>;
 
@@ -85,6 +93,8 @@ interface SmartDatePickerProps {
     defaultValue?: Date | string;
     info?: string;
     subLabel?: string;
+    disabled?: boolean | ((formData: any) => boolean);
+    hidden?: boolean | ((formData: any) => boolean);
 }
 declare const SmartDatePicker: React__default.FC<SmartDatePickerProps>;
 
@@ -100,7 +110,8 @@ interface SmartTagsProps {
     maxLength?: number;
     minLength?: number;
     allowDuplicates?: boolean;
-    disabled?: boolean;
+    disabled?: boolean | ((formData: any) => boolean);
+    hidden?: boolean | ((formData: any) => boolean);
     onTagAdd?: (tagText: string) => void;
     onTagRemove?: (tagText: string) => void;
     info?: string;

package/dist/{chunk-EE6VZXWC.js → chunk-3L7TKJIB.js}

@@ -222,46 +222,40 @@ var SmartFormProvider = ({
           });
         }
       }
-      if (!response.ok) {
-        const errorResponse = await response.json().catch(() => ({ message: "Request failed" }));
-        console.log("Error response:", errorResponse);
-        throw new Error(JSON.stringify(errorResponse));
-      }
-      const result = await response.json();
-      if (config.onSuccess) {
-        config.onSuccess(result);
+      let responseBody;
+      try {
+        responseBody = await response.json();
+      } catch {
+        responseBody = await response.text();
       }
-      for (const hook of submitHooksRef.current.values()) {
-        try {
-          await hook();
-        } catch (hookError) {
-          console.error("Submit hook error:", hookError);
+      const responseData = {
+        status: response.status,
+        statusText: response.statusText,
+        body: responseBody
+      };
+      if (response.status >= 200 && response.status < 300) {
+        if (config.onSuccess) {
+          config.onSuccess(responseData);
+        }
+        for (const hook of submitHooksRef.current.values()) {
+          try {
+            await hook();
+          } catch (hookError) {
+            console.error("Submit hook error:", hookError);
+          }
+        }
+      } else {
+        if (config.onError) {
+          config.onError(responseData);
         }
       }
     } catch (error) {
       if (config.onError) {
-        let errorData;
-        try {
-          errorData = JSON.parse(error.message);
-        } catch {
-          let userFriendlyMessage = "An error occurred";
-          if (error.message === "Failed to fetch" || error.message?.includes("Failed to fetch")) {
-            userFriendlyMessage = "This service is temporarily unavailable. Please try again after some time.";
-          } else if (error.message?.includes("Network Error")) {
-            userFriendlyMessage = "Network error occurred. Please check your connection and try again.";
-          } else if (error.message?.includes("timeout")) {
-            userFriendlyMessage = "Request timed out. Please try again.";
-          } else if (error.message?.includes("CORS")) {
-            userFriendlyMessage = "Connection error. Please contact support if this persists.";
-          } else if (error.message && error.message !== "An error occurred") {
-            userFriendlyMessage = error.message;
-          }
-          errorData = {
-            message: userFriendlyMessage,
-            details: []
-          };
-        }
-        config.onError(errorData);
+        config.onError({
+          status: 0,
+          statusText: "Network Error",
+          body: error.message || "An error occurred"
+        });
       }
       console.error("Form submission error:", error);
     } finally {
@@ -350,11 +344,21 @@ var SmartFormProvider = ({
           });
         }
       }
-      if (!response.ok) {
-        throw new Error(`HTTP error! status: ${response.status}`);
+      let responseBody;
+      try {
+        responseBody = await response.json();
+      } catch {
+        responseBody = await response.text();
+      }
+      if (response.status >= 200 && response.status < 300) {
+        console.log("Draft saved successfully:", responseBody);
+      } else {
+        console.error("Draft save failed:", {
+          status: response.status,
+          statusText: response.statusText,
+          body: responseBody
+        });
       }
-      const result = await response.json();
-      console.log("Draft saved successfully:", result);
     } catch (error) {
       console.error("Draft save error:", error);
     } finally {
@@ -518,13 +522,19 @@ var SmartInput = ({
   required = false,
   defaultValue,
   info,
-  subLabel
+  subLabel,
+  disabled,
+  hidden
 }) => {
+  const { formData } = useSmartForm();
   const { value, error, onChange, fieldRef, registerValidation } = useFormField(field);
   const fieldDetection = useFieldDetection();
   const hasRegistered = useRef(false);
   const hasSetDefault = useRef(false);
   const [showPassword, setShowPassword] = useState(false);
+  const isDisabled = typeof disabled === "function" ? disabled(formData) : disabled || false;
+  const isHidden = typeof hidden === "function" ? hidden(formData) : hidden || false;
+  if (isHidden) return null;
   const togglePasswordVisibility = () => {
     setShowPassword(!showPassword);
   };
@@ -564,7 +574,8 @@ var SmartInput = ({
             className: `w-full ${error ? "border-destructive" : ""} ${className}`,
             placeholder: getPlaceholder(),
             rows: 4,
-            "data-field": field
+            "data-field": field,
+            disabled: isDisabled
           }
         );
       case "password":
@@ -578,7 +589,8 @@ var SmartInput = ({
               onChange: (e) => onChange(e.target.value),
               className: `w-full pr-10 ${error ? "border-destructive" : ""} ${className}`,
               placeholder: getPlaceholder(),
-              "data-field": field
+              "data-field": field,
+              disabled: isDisabled
             }
           ),
           /* @__PURE__ */ jsx(
@@ -601,7 +613,8 @@ var SmartInput = ({
             onChange: (e) => onChange(e.target.value),
             className: `w-full ${error ? "border-destructive" : ""} ${className}`,
             placeholder: getPlaceholder(),
-            "data-field": field
+            "data-field": field,
+            disabled: isDisabled
           }
         );
     }
@@ -627,5 +640,5 @@ var SmartInput = ({
 };
 
 export { FieldDetectionContext, Input, Label, SmartFormProvider, SmartInput, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, cn, useFieldDetection, useFormField, useSmartForm };
-//# sourceMappingURL=chunk-EE6VZXWC.js.map
-//# sourceMappingURL=chunk-EE6VZXWC.js.map
+//# sourceMappingURL=chunk-3L7TKJIB.js.map
+//# sourceMappingURL=chunk-3L7TKJIB.js.map