extended-dynamic-forms 0.1.10 → 0.1.12

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/ExtendedForm.d.ts

@@ -0,0 +1,4 @@
+import { default as React } from 'react';
+import { ExtendedFormProps } from './types';
+
+export declare const ExtendedForm: React.FC<ExtendedFormProps>;

package/dist/components/arrays/ArrayFieldItemTemplate.d.ts

@@ -0,0 +1,3 @@
+import { ArrayFieldItemTemplateType } from '@rjsf/utils';
+
+export declare const ArrayFieldItemTemplate: (props: ArrayFieldItemTemplateType) => import("react/jsx-runtime").JSX.Element;

package/dist/components/arrays/ArrayFieldTemplate.d.ts

@@ -0,0 +1,3 @@
+import { ArrayFieldTemplateProps } from '@rjsf/utils';
+
+export declare const ArrayFieldTemplate: (props: ArrayFieldTemplateProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/arrays/index.d.ts

@@ -0,0 +1,2 @@
+export { ArrayFieldTemplate } from './ArrayFieldTemplate';
+export { ArrayFieldItemTemplate } from './ArrayFieldItemTemplate';

package/dist/components/fields/AddressField.d.ts

@@ -0,0 +1,4 @@
+import { default as React } from 'react';
+import { FieldProps } from '@rjsf/utils';
+
+export declare const AddressField: React.FC<FieldProps>;

package/dist/components/fields/CurrencyField.d.ts

@@ -0,0 +1,4 @@
+import { default as React } from 'react';
+import { FieldProps } from '@rjsf/utils';
+
+export declare const CurrencyField: React.FC<FieldProps>;

package/dist/components/fields/PhoneField.d.ts

@@ -0,0 +1,4 @@
+import { default as React } from 'react';
+import { FieldProps } from '@rjsf/utils';
+
+export declare const PhoneField: React.FC<FieldProps>;

package/dist/components/index.d.ts

@@ -0,0 +1,15 @@
+import { AddressField } from './fields/AddressField';
+import { PhoneField } from './fields/PhoneField';
+import { CurrencyField } from './fields/CurrencyField';
+import { ArrayFieldTemplate, ArrayFieldItemTemplate } from './arrays';
+
+export declare const customFields: {
+    address: import('react').FC<import('@rjsf/utils').FieldProps<any, import('@rjsf/utils').RJSFSchema, any>>;
+    phone: import('react').FC<import('@rjsf/utils').FieldProps<any, import('@rjsf/utils').RJSFSchema, any>>;
+    currency: import('react').FC<import('@rjsf/utils').FieldProps<any, import('@rjsf/utils').RJSFSchema, any>>;
+};
+export declare const customTemplates: {
+    ArrayFieldTemplate: (props: import('@rjsf/utils').ArrayFieldTemplateProps) => import("react/jsx-runtime").JSX.Element;
+    ArrayFieldItemTemplate: (props: import('@rjsf/utils').ArrayFieldItemTemplateType) => import("react/jsx-runtime").JSX.Element;
+};
+export { AddressField, PhoneField, CurrencyField, ArrayFieldTemplate, ArrayFieldItemTemplate, };

package/dist/components/ui/badge.d.ts

@@ -0,0 +1,9 @@
+import { VariantProps } from 'class-variance-authority';
+import * as React from "react";
+declare const badgeVariants: (props?: ({
+    variant?: "default" | "destructive" | "outline" | "secondary" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export interface BadgeProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {
+}
+declare function Badge({ className, variant, ...props }: BadgeProps): import("react/jsx-runtime").JSX.Element;
+export { Badge, badgeVariants };

package/dist/components/ui/button.d.ts

@@ -0,0 +1,11 @@
+import { VariantProps } from 'class-variance-authority';
+import * as React from "react";
+declare const buttonVariants: (props?: ({
+    variant?: "default" | "link" | "destructive" | "outline" | "secondary" | "ghost" | null | undefined;
+    size?: "default" | "sm" | "lg" | "icon" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
+    asChild?: boolean;
+}
+declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
+export { Button, buttonVariants };

package/dist/components/ui/calendar.d.ts

@@ -0,0 +1,8 @@
+import { DayPicker } from 'react-day-picker';
+import * as React from "react";
+export type CalendarProps = React.ComponentProps<typeof DayPicker>;
+declare function Calendar({ className, classNames, showOutsideDays, ...props }: CalendarProps): import("react/jsx-runtime").JSX.Element;
+declare namespace Calendar {
+    var displayName: string;
+}
+export { Calendar };

package/dist/components/ui/card.d.ts

@@ -0,0 +1,8 @@
+import * as React from "react";
+declare const Card: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const CardHeader: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const CardTitle: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLHeadingElement> & React.RefAttributes<HTMLParagraphElement>>;
+declare const CardDescription: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLParagraphElement> & React.RefAttributes<HTMLParagraphElement>>;
+declare const CardContent: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const CardFooter: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent };

package/dist/components/ui/checkbox.d.ts

@@ -0,0 +1,4 @@
+import * as React from "react";
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
+declare const Checkbox: React.ForwardRefExoticComponent<Omit<CheckboxPrimitive.CheckboxProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export { Checkbox };

package/dist/components/ui/date-picker.d.ts

@@ -0,0 +1,13 @@
+interface DatePickerProps {
+    id?: string;
+    value?: string;
+    placeholder?: string;
+    disabled?: boolean;
+    onChange?: (value: string) => void;
+    onBlur?: () => void;
+    onFocus?: () => void;
+    className?: string;
+    "aria-invalid"?: boolean;
+}
+export declare function DatePicker({ id, value, placeholder, disabled, onChange, onBlur, onFocus, className, "aria-invalid": ariaInvalid, }: DatePickerProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/ui/input.d.ts

@@ -0,0 +1,5 @@
+import * as React from "react";
+export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+}
+declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
+export { Input };

package/dist/components/ui/label.d.ts

@@ -0,0 +1,5 @@
+import { VariantProps } from 'class-variance-authority';
+import * as React from "react";
+import * as LabelPrimitive from "@radix-ui/react-label";
+declare const Label: React.ForwardRefExoticComponent<Omit<LabelPrimitive.LabelProps & React.RefAttributes<HTMLLabelElement>, "ref"> & VariantProps<(props?: import('class-variance-authority/types').ClassProp | undefined) => string> & React.RefAttributes<HTMLLabelElement>>;
+export { Label };

package/dist/components/ui/popover.d.ts

@@ -0,0 +1,6 @@
+import * as React from "react";
+import * as PopoverPrimitive from "@radix-ui/react-popover";
+declare const Popover: React.FC<PopoverPrimitive.PopoverProps>;
+declare const PopoverTrigger: React.ForwardRefExoticComponent<PopoverPrimitive.PopoverTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+declare const PopoverContent: React.ForwardRefExoticComponent<Omit<PopoverPrimitive.PopoverContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export { Popover, PopoverTrigger, PopoverContent };

package/dist/components/ui/select.d.ts

@@ -0,0 +1,13 @@
+import * as React from "react";
+import * as SelectPrimitive from "@radix-ui/react-select";
+declare const Select: React.FC<SelectPrimitive.SelectProps>;
+declare const SelectGroup: React.ForwardRefExoticComponent<SelectPrimitive.SelectGroupProps & React.RefAttributes<HTMLDivElement>>;
+declare const SelectValue: React.ForwardRefExoticComponent<SelectPrimitive.SelectValueProps & React.RefAttributes<HTMLSpanElement>>;
+declare const SelectTrigger: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+declare const SelectScrollUpButton: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectScrollUpButtonProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const SelectScrollDownButton: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectScrollDownButtonProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const SelectContent: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const SelectLabel: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectLabelProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const SelectItem: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const SelectSeparator: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectSeparatorProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export { Select, SelectGroup, SelectValue, SelectTrigger, SelectContent, SelectLabel, SelectItem, SelectSeparator, SelectScrollUpButton, SelectScrollDownButton, };

package/dist/components/ui/slider.d.ts

@@ -0,0 +1,4 @@
+import * as React from "react";
+import * as SliderPrimitive from "@radix-ui/react-slider";
+declare const Slider: React.ForwardRefExoticComponent<Omit<SliderPrimitive.SliderProps & React.RefAttributes<HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+export { Slider };

package/dist/components/ui/textarea.d.ts

@@ -0,0 +1,5 @@
+import * as React from "react";
+export interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
+}
+declare const Textarea: React.ForwardRefExoticComponent<TextareaProps & React.RefAttributes<HTMLTextAreaElement>>;
+export { Textarea };

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,18 @@
+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;
+};
+/**
+ * Extract field value from form data using field path
+ */
+export declare function getFieldValue(formData: any, fieldPath: string): any;

package/dist/events/FormEventContext.d.ts

@@ -0,0 +1,20 @@
+import { default as React, ReactNode } from 'react';
+import { FormEventHub } from './FormEventHub';
+
+interface FormEventContextType {
+    eventHub: FormEventHub;
+    formData?: any;
+}
+interface FormEventProviderProps {
+    eventHub: FormEventHub;
+    formData?: any;
+    children: ReactNode;
+}
+export declare const FormEventProvider: React.FC<FormEventProviderProps>;
+export declare const useFormEventHub: () => FormEventContextType;
+export declare const useFieldEventHandlers: (fieldId: string, schema?: any, fieldPath?: string[]) => {
+    onFocus: (value: any) => Promise<void>;
+    onBlur: (value: any) => Promise<void>;
+    onChange: (value: any) => Promise<void>;
+};
+export {};

package/dist/events/FormEventHub.d.ts

@@ -0,0 +1,27 @@
+import { FormEventHandlers, FieldEventHandlers, WebhookConfig } from '../types';
+
+export declare class FormEventHub {
+    private formHandlers;
+    private fieldHandlers;
+    private webhooks;
+    private debounceTimers;
+    private webhookQueue;
+    private isProcessingQueue;
+    constructor(formHandlers: FormEventHandlers, fieldHandlers?: FieldEventHandlers, webhooks?: WebhookConfig[]);
+    handleBeforeSubmit(data: any): Promise<any>;
+    handleAfterSubmit(data: any): Promise<void>;
+    handleBeforeValidation(data: any): Promise<any>;
+    handleAfterValidation(data: any, errors: any): Promise<void>;
+    handleFieldEvent(eventType: 'focus' | 'blur' | 'change', fieldId: string, fieldValue: any, schema?: any, formData?: any, fieldPath?: string[]): Promise<void>;
+    private processWebhooks;
+    private debounceWebhook;
+    private queueWebhook;
+    private processWebhookQueue;
+    private callWebhook;
+    createFieldEventHandlers(fieldId: string, schema?: any, formData?: any, fieldPath?: string[]): {
+        onFocus: (value: any) => Promise<void>;
+        onBlur: (value: any) => Promise<void>;
+        onChange: (value: any) => Promise<void>;
+    };
+    cleanup(): void;
+}

package/dist/events/FormEventManager.d.ts

@@ -0,0 +1,10 @@
+import { FormEventHandlers } from '../types';
+
+export declare class FormEventManager {
+    private handlers;
+    constructor(handlers: FormEventHandlers);
+    handleBeforeSubmit(data: any): Promise<any>;
+    handleAfterSubmit(data: any): Promise<void>;
+    handleBeforeValidation(data: any): Promise<any>;
+    handleAfterValidation(data: any, errors: any): Promise<void>;
+}

package/dist/events/index.d.ts

@@ -0,0 +1,4 @@
+export { FormEventManager } from './FormEventManager';
+export { FormEventHub } from './FormEventHub';
+export { FormEventProvider, useFormEventHub, useFieldEventHandlers } from './FormEventContext';
+export type { FormEventHandlers, FieldEventHandlers, FormFieldEvent, WebhookConfig } from '../types';

package/dist/index.d.ts

@@ -0,0 +1,15 @@
+
+export * from './components';
+export * from './widgets';
+export * from './layouts';
+export * from './events';
+export * from './types';
+export * from './utils';
+export * from './lib/utils';
+export type { FormProps, IChangeEvent } from '@rjsf/core';
+export type { RJSFSchema, UiSchema, WidgetProps, FieldProps, ArrayFieldTemplateProps, ObjectFieldTemplateProps, FieldTemplateProps, ErrorSchema, RJSFValidationError } from '@rjsf/utils';
+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';