extended-dynamic-forms 0.1.11 → 0.1.13

package/README.md

@@ -11,6 +11,7 @@ A comprehensive extension of React JSON Schema Form (RJSF) v5 with shadcn/ui com
 - 🎯 **Central Event Orchestration**: Unified system capturing all form field events (focus, blur, change)
 - 🔗 **Webhook Integration**: Configure multiple webhook endpoints with debouncing and retry logic
 - 🔧 **Enhanced Form Events**: Before/after submit and validation hooks plus field-level events
+- 🚀 **Conditional Logic**: Show/hide fields, make fields required/optional based on complex conditions
 - 📦 **TypeScript Support**: Fully typed with comprehensive type definitions
 - ⚡ **Vite Powered**: Fast development and optimized builds
 - 🎯 **Tailwind CSS**: Utility-first styling with full customization
@@ -518,6 +519,137 @@ const webhooks: WebhookConfig[] = [
 />
 ```
 
+## Conditional Forms
+
+Extended Dynamic Forms includes powerful conditional logic capabilities that allow you to:
+- Show/hide fields based on other field values
+- Make fields required/optional conditionally
+- Enable/disable fields based on complex conditions
+- Support multiple conditions with AND/OR logic
+
+### Basic Conditional Example
+
+```tsx
+import { ConditionalForm, ConditionalRule } from 'extended-dynamic-forms';
+
+const schema = {
+  type: 'object',
+  properties: {
+    accountType: {
+      type: 'string',
+      enum: ['personal', 'business'],
+      title: 'Account Type'
+    },
+    firstName: { type: 'string', title: 'First Name' },
+    lastName: { type: 'string', title: 'Last Name' },
+    businessName: { type: 'string', title: 'Business Name' },
+    taxId: { type: 'string', title: 'Tax ID' }
+  }
+};
+
+const conditionalRules: ConditionalRule[] = [
+  {
+    conditions: {
+      accountType: { equals: 'personal' }
+    },
+    event: {
+      type: 'show',
+      params: { fields: ['firstName', 'lastName'] }
+    }
+  },
+  {
+    conditions: {
+      accountType: { equals: 'business' }
+    },
+    event: {
+      type: 'show',
+      params: { fields: ['businessName', 'taxId'] }
+    }
+  }
+];
+
+<ConditionalForm
+  schema={schema}
+  conditionalRules={conditionalRules}
+  onSubmit={handleSubmit}
+/>
+```
+
+### Complex Conditions
+
+```tsx
+const complexRules: ConditionalRule[] = [
+  {
+    // Show state field when country is US AND has address
+    conditions: {
+      all: [
+        { country: { equals: 'US' } },
+        { hasAddress: { equals: true } }
+      ]
+    },
+    event: {
+      type: 'show',
+      params: { fields: ['state', 'zipCode'] }
+    }
+  },
+  {
+    // Show verification for high income personal OR business accounts
+    conditions: {
+      any: [
+        {
+          all: [
+            { accountType: { equals: 'personal' } },
+            { income: { greaterThan: 100000 } }
+          ]
+        },
+        {
+          accountType: { equals: 'business' }
+        }
+      ]
+    },
+    event: {
+      type: 'require',
+      params: { fields: ['verificationDocument'] }
+    }
+  }
+];
+```
+
+### Available Conditions
+
+- `equals` / `notEquals` - Exact value matching
+- `greaterThan` / `lessThan` - Numeric comparisons
+- `greaterThanOrEqual` / `lessThanOrEqual` - Inclusive numeric comparisons
+- `contains` / `notContains` - String contains
+- `in` / `notIn` - Value in array
+- `empty` / `notEmpty` - Check if field has value
+
+### Available Events
+
+- `show` / `hide` - Control field visibility
+- `require` / `unrequire` - Make fields required/optional
+- `enable` / `disable` - Enable/disable fields
+
+### Combining with Webhooks
+
+```tsx
+<ConditionalForm
+  schema={schema}
+  conditionalRules={rules}
+  webhooks={[
+    {
+      url: 'https://api.example.com/validate',
+      events: ['change'],
+      debounceMs: 500
+    }
+  ]}
+  onFieldChange={(event) => {
+    // Local handling alongside conditional logic
+    console.log('Field changed:', event);
+  }}
+/>
+```
+
 ## API Reference
 
 ### ExtendedFormProps
@@ -575,6 +707,39 @@ interface WebhookConfig {
 }
 ```
 
+### ConditionalRule
+
+```typescript
+interface ConditionalRule {
+  conditions: {
+    [fieldPath: string]: FieldCondition;
+    all?: Array<{ [fieldPath: string]: FieldCondition }>;
+    any?: Array<{ [fieldPath: string]: FieldCondition }>;
+  };
+  event: {
+    type: 'show' | 'hide' | 'require' | 'unrequire' | 'disable' | 'enable';
+    params: {
+      fields: string[];
+    };
+  };
+}
+
+interface FieldCondition {
+  equals?: any;
+  notEquals?: any;
+  greaterThan?: number;
+  lessThan?: number;
+  greaterThanOrEqual?: number;
+  lessThanOrEqual?: number;
+  contains?: string;
+  notContains?: string;
+  in?: any[];
+  notIn?: any[];
+  empty?: boolean;
+  notEmpty?: boolean;
+}
+```
+
 ## Utility Functions
 
 ```tsx

package/dist/conditionals/ConditionalForm.d.ts

@@ -0,0 +1,7 @@
+import { default as React } from 'react';
+import { ConditionalFormProps } from './types';
+
+/**
+ * Conditional form using json-rules-engine
+ */
+export declare const ConditionalForm: React.FC<ConditionalFormProps>;

package/dist/conditionals/index.d.ts

@@ -0,0 +1,3 @@
+export { ConditionalForm } from './ConditionalForm';
+export * from './types';
+export * from './utils';

package/dist/conditionals/types.d.ts

@@ -0,0 +1,65 @@
+import { ExtendedFormProps } from '../types';
+
+export type ConditionOperator = 'equals' | 'notEquals' | 'greaterThan' | 'lessThan' | 'greaterThanOrEqual' | 'lessThanOrEqual' | 'contains' | 'notContains' | 'in' | 'notIn' | 'empty' | 'notEmpty';
+export interface FieldCondition {
+    equals?: any;
+    notEquals?: any;
+    greaterThan?: number;
+    lessThan?: number;
+    greaterThanOrEqual?: number;
+    lessThanOrEqual?: number;
+    contains?: string;
+    notContains?: string;
+    in?: any[];
+    notIn?: any[];
+    empty?: boolean;
+    notEmpty?: boolean;
+}
+export interface ConditionalRule {
+    conditions: {
+        [fieldPath: string]: FieldCondition;
+    } & {
+        all?: Array<{
+            [fieldPath: string]: FieldCondition;
+        }>;
+        any?: Array<{
+            [fieldPath: string]: FieldCondition;
+        }>;
+    };
+    event: {
+        type: 'show' | 'hide' | 'require' | 'unrequire' | 'disable' | 'enable';
+        params: {
+            fields: string[];
+        };
+    };
+}
+export interface ConditionalFormProps extends ExtendedFormProps {
+    conditionalRules: ConditionalRule[];
+    debug?: boolean;
+}
+export interface RuleEngineEvent {
+    type: string;
+    params: any;
+}
+export interface RuleEngineCondition {
+    fact: string;
+    operator: string;
+    value: any;
+}
+export interface RuleEngineRule {
+    conditions: {
+        all?: RuleEngineCondition[];
+        any?: RuleEngineCondition[];
+    };
+    event: RuleEngineEvent;
+}
+export interface ConditionalState {
+    hiddenFields: Set<string>;
+    disabledFields: Set<string>;
+    requiredFields: Set<string>;
+}
+export interface ConditionalContext {
+    state: ConditionalState;
+    updateState: (updates: Partial<ConditionalState>) => void;
+    evaluateRules: (formData: any) => void;
+}

package/dist/conditionals/utils.d.ts

@@ -0,0 +1,22 @@
+import { RJSFSchema, UiSchema } from '@rjsf/utils';
+import { ConditionalRule, ConditionalState } from './types';
+
+/**
+ * Convert our conditional rules to json-rules-engine format
+ */
+export declare function convertToEngineRules(rules: ConditionalRule[]): any[];
+/**
+ * Apply conditional state to schema
+ */
+export declare function applyConditionalState(schema: RJSFSchema, uiSchema: UiSchema, state: ConditionalState): {
+    schema: RJSFSchema;
+    uiSchema: UiSchema;
+};
+/**
+ * Flatten nested objects for fact extraction
+ */
+export declare function flattenFormData(obj: any, prefix?: string, separator?: string): Record<string, any>;
+/**
+ * Extract field value from form data using field path
+ */
+export declare function getFieldValue(formData: any, fieldPath: string): any;

package/dist/index.d.ts

@@ -11,3 +11,5 @@ export type { RJSFSchema, UiSchema, WidgetProps, FieldProps, ArrayFieldTemplateP
 export { default as validator } from '@rjsf/validator-ajv8';
 export { generateTheme } from '@rjsf/shadcn';
 export { ExtendedForm } from './ExtendedForm';
+export { ConditionalForm } from './conditionals';
+export type { ConditionalFormProps, ConditionalRule, FieldCondition, ConditionalState } from './conditionals/types';