extended-dynamic-forms 0.2.0 → 0.2.1

package/dist/types/index.d.ts

@@ -1,6 +1,7 @@
 import { FormProps } from '@rjsf/core';
 import { RJSFSchema, UiSchema } from '@rjsf/utils';
 
+export type WebhookEventType = 'focus' | 'blur' | 'change' | 'submit' | 'stepChange' | 'validationError';
 export interface FormEventHandlers {
     beforeSubmit?: (data: any) => Promise<any> | any;
     afterSubmit?: (data: any) => Promise<void> | void;
@@ -20,7 +21,7 @@ export interface WebhookConfig {
     url: string;
     method?: 'POST' | 'PUT' | 'PATCH';
     headers?: Record<string, string>;
-    events?: ('focus' | 'blur' | 'change')[];
+    events?: WebhookEventType[];
     debounceMs?: number;
     retries?: number;
     timeout?: number;
@@ -34,6 +35,10 @@ export interface ExtendedFormProps extends Omit<FormProps, 'validator'>, FormEve
     schema: RJSFSchema;
     uiSchema?: UiSchema;
     webhooks?: WebhookConfig[];
+    eventHub?: any;
+    onWebhookStart?: (webhook: WebhookConfig, event: any) => void;
+    onWebhookComplete?: (webhook: WebhookConfig, event: any, response: any) => void;
+    onWebhookError?: (webhook: WebhookConfig, event: any, error: Error) => void;
 }
 export interface CustomWidgetProps {
     label?: string;

package/dist/utils/fieldChangeDetector.d.ts

@@ -0,0 +1,22 @@
+/**
+ * Utility for detecting field-level changes in form data
+ */
+export interface FieldChange {
+    fieldId: string;
+    fieldPath: string[];
+    oldValue: any;
+    newValue: any;
+}
+/**
+ * Deep comparison to find changed fields between two form data objects
+ */
+export declare function detectFieldChanges(oldData: any, newData: any, parentPath?: string[]): FieldChange[];
+/**
+ * Convert field path to RJSF field ID format
+ * RJSF uses a specific format like "root_fieldName_0_subField"
+ */
+export declare function pathToFieldId(path: string[], idPrefix?: string): string;
+/**
+ * Extract schema for a specific field path
+ */
+export declare function getFieldSchema(schema: any, path: string[]): any | undefined;

package/dist/vanilla-entry.d.ts

@@ -1,6 +1,7 @@
 import { default as React } from 'react';
 import { default as ReactDOM } from 'react-dom/client';
 import { default as dayjs } from 'dayjs';
+import { default as jsonLogic } from 'json-logic-js';
 
 import * as antd from 'antd';
 import * as ExtendedDynamicFormsExports from './index';
@@ -52,6 +53,32 @@ declare const ExtendedDynamicForms: {
             file: string;
             hidden: string;
         };
+        jsonLogic: {
+            apply: typeof jsonLogic.apply;
+            add_operation: typeof jsonLogic.add_operation;
+            rm_operation: typeof jsonLogic.rm_operation;
+            equals: (field: string, value: any) => {
+                "==": any[];
+            };
+            and: (...conditions: any[]) => {
+                and: any[];
+            };
+            or: (...conditions: any[]) => {
+                or: any[];
+            };
+            not: (condition: any) => {
+                "!": any;
+            };
+            greaterThan: (field: string, value: any) => {
+                ">": any[];
+            };
+            lessThan: (field: string, value: any) => {
+                "<": any[];
+            };
+            contains: (array: string, value: any) => {
+                in: any[];
+            };
+        };
     };
     validator: import('@rjsf/validator-ajv8/lib/validator.js').default<any, ExtendedDynamicFormsExports.RJSFSchema, any>;
     ExtendedForm: React.ForwardRefExoticComponent<Omit<ExtendedDynamicFormsExports.ExtendedFormProps, "ref"> & React.RefAttributes<any>>;
@@ -200,5 +227,6 @@ declare const ExtendedDynamicForms: {
     ReactDOM: typeof ReactDOM;
     antd: typeof antd;
     dayjs: typeof dayjs;
+    jsonLogic: typeof jsonLogic;
 };
 export default ExtendedDynamicForms;

package/package.json

@@ -1,13 +1,12 @@
 {
   "name": "extended-dynamic-forms",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "description": "Extended React JSON Schema Form (RJSF) v6 with custom components, widgets, templates, layouts, and form events",
   "main": "dist/index.umd.js",
   "module": "dist/index.es.js",
   "types": "dist/index.d.ts",
   "files": [
     "dist",
-    "examples",
     "LICENSE",
     "README.md"
   ],
@@ -41,10 +40,10 @@
     "prepublishOnly": "npm run build",
     "playground": "cd playground && npm install && npm run dev",
     "playground:build": "cd playground && npm run build",
-    "serve:examples": "npx http-server examples/vanilla-js -p 8080 -o",
     "setup:dev": "git clone https://github.com/rjsf-team/react-jsonschema-form ../react-jsonschema-form && cd ../react-jsonschema-form && npm install && npm run build",
     "link:rjsf": "cd ../react-jsonschema-form/packages/core && npm link && cd ../antd && npm link && cd ../utils && npm link && cd ../validator-ajv8 && npm link",
-    "dev:install": "npm run setup:dev && npm run link:rjsf && npm install"
+    "dev:install": "npm run setup:dev && npm run link:rjsf && npm install",
+    "generate:widget": "plop --plopfile plopfile.js --dest ."
   },
   "keywords": [
     "react",
@@ -93,6 +92,7 @@
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.5",
     "jsdom": "^26.1.0",
+    "plop": "^4.0.1",
     "prettier": "^3.5.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

package/examples/conditional-v2-example.tsx

@@ -1,64 +0,0 @@
-import React from 'react';
-import { ExtendedForm } from '../src/ExtendedForm';
-import { RJSFSchema, UiSchema } from '@rjsf/utils';
-import { useConditionalUi, UiRule, JsonLogicRule } from '../src/conditionals/v2';
-
-const schema: RJSFSchema = {
-  type: 'object',
-  properties: {
-    requiresShipping: {
-      type: 'boolean',
-      title: 'Requires Shipping?'
-    },
-    shippingAddress: {
-      type: 'object',
-      title: 'Shipping Address',
-      properties: {
-        street: { type: 'string', title: 'Street' },
-        city: { type: 'string', title: 'City' },
-        zip: { type: 'string', title: 'ZIP Code' }
-      }
-    }
-  }
-};
-
-const baseUiSchema: UiSchema = {
-  requiresShipping: {
-    'ui:widget': 'checkbox'
-  },
-  shippingAddress: {
-    street: { 'ui:widget': 'text' },
-    city: { 'ui:widget': 'text' },
-    zip: { 'ui:widget': 'text' }
-  }
-};
-
-export function ConditionalV2Example() {
-  const [formData, setFormData] = React.useState({});
-
-  // Define UI rules
-  const uiRules: UiRule[] = [
-    {
-      name: 'Hide shipping address when not required',
-      condition: { "!": { "var": "requiresShipping" } } as JsonLogicRule,
-      effect: [
-        { op: 'add', path: '/shippingAddress/ui:widget', value: 'hidden' }
-      ]
-    }
-  ];
-
-  // Apply conditional UI logic
-  const conditionalUiSchema = useConditionalUi(uiRules, baseUiSchema, formData);
-
-  return (
-    <div>
-      <h1>Conditional V2 Example - Three Pillars Architecture</h1>
-      <ExtendedForm
-        schema={schema}
-        uiSchema={conditionalUiSchema}
-        formData={formData}
-        onChange={({ formData }) => setFormData(formData)}
-      />
-    </div>
-  );
-}

package/examples/dynamic-array-items-example.tsx

@@ -1,211 +0,0 @@
-import React from 'react';
-import { ExtendedForm } from '../src/ExtendedForm';
-import { RJSFSchema, UiSchema } from '@rjsf/utils';
-import { 
-  createDynamicArrayItemsUiSchema, 
-  arrayItemPatterns 
-} from '../src/conditionals/v2/utils/dynamicArrayItems';
-
-const schema: RJSFSchema = {
-  type: 'object',
-  properties: {
-    directors: {
-      type: 'array',
-      title: 'Company Directors',
-      items: {
-        type: 'object',
-        required: ['name', 'directorType'],
-        properties: {
-          name: { type: 'string', title: 'Name' },
-          directorType: {
-            type: 'string',
-            title: 'Director Type',
-            enum: ['executive', 'non-executive'],
-            enumNames: ['Executive', 'Non-Executive']
-          },
-          executiveRole: {
-            type: 'string',
-            title: 'Executive Role',
-            enum: ['CEO', 'CFO', 'CTO', 'COO', 'Other'],
-            enumNames: ['CEO', 'CFO', 'CTO', 'COO', 'Other']
-          },
-          otherRoleDetails: {
-            type: 'string',
-            title: 'Other Role Details'
-          },
-          hasShareholding: { type: 'boolean', title: 'Has Shareholding?' },
-          shareholdingPercentage: { 
-            type: 'number', 
-            title: 'Shareholding %',
-            minimum: 0,
-            maximum: 100
-          }
-        }
-      }
-    }
-  }
-};
-
-// Base UI schema for all array items
-const baseItemUiSchema: UiSchema = {
-  'ui:order': ['name', 'directorType', 'executiveRole', 'otherRoleDetails', 'hasShareholding', 'shareholdingPercentage'],
-  name: {
-    'ui:widget': 'text',
-    'ui:placeholder': 'Enter director name'
-  },
-  directorType: {
-    'ui:widget': 'select'
-  },
-  executiveRole: {
-    'ui:widget': 'select'
-  },
-  otherRoleDetails: {
-    'ui:widget': 'text',
-    'ui:placeholder': 'Specify other role'
-  },
-  hasShareholding: {
-    'ui:widget': 'checkbox'
-  },
-  shareholdingPercentage: {
-    'ui:widget': 'updown'
-  }
-};
-
-// Create dynamic UI schema using the utility
-const uiSchema: UiSchema = {
-  directors: {
-    items: createDynamicArrayItemsUiSchema(
-      baseItemUiSchema,
-      (itemData, index) => {
-        const conditionalUi: Partial<UiSchema> = {};
-        
-        // Three-level conditional dependency chain
-        // Level 1: Director type determines if executive role is shown
-        if (itemData?.directorType !== 'executive') {
-          conditionalUi.executiveRole = { 'ui:widget': 'hidden' };
-          // Also hide dependent field since parent is hidden
-          conditionalUi.otherRoleDetails = { 'ui:widget': 'hidden' };
-        } else {
-          // Level 2: Executive role determines if other role details is shown
-          if (itemData?.executiveRole !== 'Other') {
-            conditionalUi.otherRoleDetails = { 'ui:widget': 'hidden' };
-          }
-        }
-        
-        // Hide shareholding percentage if not a shareholder
-        if (!itemData?.hasShareholding) {
-          conditionalUi.shareholdingPercentage = { 'ui:widget': 'hidden' };
-        }
-        
-        // Add special styling for first director
-        if (index === 0) {
-          conditionalUi['ui:classNames'] = 'primary-director';
-          conditionalUi['ui:title'] = 'Primary Director';
-        }
-        
-        return conditionalUi;
-      }
-    )
-  }
-};
-
-export function DynamicArrayItemsExample() {
-  const [formData, setFormData] = React.useState({
-    directors: [
-      { 
-        name: 'John Doe', 
-        directorType: 'executive', 
-        executiveRole: 'CEO', 
-        hasShareholding: true, 
-        shareholdingPercentage: 51 
-      },
-      { 
-        name: 'Jane Smith', 
-        directorType: 'executive', 
-        executiveRole: 'Other', 
-        otherRoleDetails: 'Head of Innovation',
-        hasShareholding: true,
-        shareholdingPercentage: 30
-      },
-      { 
-        name: 'Bob Johnson', 
-        directorType: 'non-executive',
-        hasShareholding: false
-      }
-    ]
-  });
-
-  return (
-    <div>
-      <h1>Dynamic Array Items Example</h1>
-      <p>
-        This example demonstrates O(n) performance for array conditionals using 
-        the RJSF fork's dynamic uiSchema.items capability. It showcases:
-      </p>
-      <ul>
-        <li>Three-level conditional dependencies (Director Type → Executive Role → Other Role Details)</li>
-        <li>Enum-based conditions for more realistic form patterns</li>
-        <li>The common "Other" option pattern with additional text field</li>
-        <li>Multiple independent conditionals within each array item</li>
-      </ul>
-      
-      <ExtendedForm
-        schema={schema}
-        uiSchema={uiSchema}
-        formData={formData}
-        onChange={({ formData }) => setFormData(formData)}
-      />
-      
-      <div style={{ marginTop: '20px' }}>
-        <h3>Performance Benefits:</h3>
-        <ul>
-          <li>Each array item's UI is calculated independently</li>
-          <li>No wildcard pattern expansion needed</li>
-          <li>O(n) complexity instead of O(n²)</li>
-          <li>Scales efficiently with large arrays</li>
-        </ul>
-      </div>
-    </div>
-  );
-}
-
-// Alternative example using helper patterns
-export function DynamicArrayPatternsExample() {
-  const uiSchemaWithPatterns: UiSchema = {
-    directors: {
-      items: createDynamicArrayItemsUiSchema(
-        baseItemUiSchema,
-        (itemData, index) => {
-          // Combine multiple pattern helpers for cleaner code
-          const hideShareholding = arrayItemPatterns.hideField(
-            'shareholdingPercentage',
-            (data) => !data?.hasShareholding
-          )(itemData, index);
-          
-          const hideExecutiveRole = arrayItemPatterns.hideField(
-            'executiveRole',
-            (data) => data?.directorType !== 'executive'
-          )(itemData, index);
-          
-          const hideOtherRoleDetails = arrayItemPatterns.hideField(
-            'otherRoleDetails',
-            (data) => data?.directorType !== 'executive' || data?.executiveRole !== 'Other'
-          )(itemData, index);
-          
-          return {
-            ...hideShareholding,
-            ...hideExecutiveRole,
-            ...hideOtherRoleDetails
-          };
-        }
-      )
-    }
-  };
-  
-  return (
-    <ExtendedForm
-      schema={schema}
-      uiSchema={uiSchemaWithPatterns}
-    />
-  );
-}