extended-dynamic-forms 0.1.17 → 0.1.18

package/dist/style.css

@@ -1 +1 @@
-html,body{width:100%;height:100%}input::-ms-clear,input::-ms-reveal{display:none}*,*:before,*:after{box-sizing:border-box}html{font-family:sans-serif;line-height:1.15;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;-ms-overflow-style:scrollbar;-webkit-tap-highlight-color:rgba(0,0,0,0)}body{margin:0}[tabindex="-1"]:focus{outline:none}hr{box-sizing:content-box;height:0;overflow:visible}h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:.5em;font-weight:500}p{margin-top:0;margin-bottom:1em}abbr[title],abbr[data-original-title]{-webkit-text-decoration:underline dotted;text-decoration:underline;text-decoration:underline dotted;border-bottom:0;cursor:help}address{margin-bottom:1em;font-style:normal;line-height:inherit}input[type=text],input[type=password],input[type=number],textarea{-webkit-appearance:none}ol,ul,dl{margin-top:0;margin-bottom:1em}ol ol,ul ul,ol ul,ul ol{margin-bottom:0}dt{font-weight:500}dd{margin-bottom:.5em;margin-left:0}blockquote{margin:0 0 1em}dfn{font-style:italic}sub,sup{position:relative;font-size:75%;line-height:0;vertical-align:baseline}pre,code,kbd,samp{font-size:1em;font-family:SFMono-Regular,Consolas,Liberation Mono,Menlo,Courier,monospace}pre{margin-top:0;margin-bottom:1em;overflow:auto}figure{margin:0 0 1em}img{vertical-align:middle;border-style:none}a,area,button,[role=button],input:not([type=range]),label,select,summary,textarea{touch-action:manipulation}table{border-collapse:collapse}caption{padding-top:.75em;padding-bottom:.3em;text-align:left;caption-side:bottom}input,button,select,optgroup,textarea{margin:0;color:inherit;font-size:inherit;font-family:inherit;line-height:inherit}button,input{overflow:visible}button,html [type=button],[type=reset],[type=submit]{-webkit-appearance:button}button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{padding:0;border-style:none}input[type=radio],input[type=checkbox]{box-sizing:border-box;padding:0}input[type=date],input[type=time],input[type=datetime-local],input[type=month]{-webkit-appearance:listbox}textarea{overflow:auto;resize:vertical}fieldset{min-width:0;margin:0;padding:0;border:0}legend{display:block;width:100%;max-width:100%;margin-bottom:.5em;padding:0;color:inherit;font-size:1.5em;line-height:inherit;white-space:normal}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{outline-offset:-2px;-webkit-appearance:none}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{font:inherit;-webkit-appearance:button}output{display:inline-block}template{display:none}[hidden]{display:none!important}mark{padding:.2em;background-color:#feffe6}*,:before,:after{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }*,:before,:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}:before,:after{--tw-content: ""}html,:host{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji";font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}button,[role=button]{cursor:pointer}:disabled{cursor:default}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}.container{width:100%;margin-right:auto;margin-left:auto;padding-right:2rem;padding-left:2rem}@media (min-width: 1400px){.container{max-width:1400px}}.relative{position:relative}.block{display:block}.flex{display:flex}.inline-flex{display:inline-flex}.grid{display:grid}.hidden{display:none}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.resize{resize:both}.space-y-6>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1.5rem * var(--tw-space-y-reverse))}.border{border-width:1px}.bg-background{background-color:hsl(var(--background))}.p-6{padding:1.5rem}.tabular-nums{--tw-numeric-spacing: tabular-nums;font-variant-numeric:var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction)}.blur{--tw-blur: blur(8px);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.invert{--tw-invert: invert(100%);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}@keyframes enter{0%{opacity:var(--tw-enter-opacity, 1);transform:translate3d(var(--tw-enter-translate-x, 0),var(--tw-enter-translate-y, 0),0) scale3d(var(--tw-enter-scale, 1),var(--tw-enter-scale, 1),var(--tw-enter-scale, 1)) rotate(var(--tw-enter-rotate, 0))}}@keyframes exit{to{opacity:var(--tw-exit-opacity, 1);transform:translate3d(var(--tw-exit-translate-x, 0),var(--tw-exit-translate-y, 0),0) scale3d(var(--tw-exit-scale, 1),var(--tw-exit-scale, 1),var(--tw-exit-scale, 1)) rotate(var(--tw-exit-rotate, 0))}}.rjsf-form{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif}.vertical-form-item .ant-form-item-label{padding-bottom:0!important;margin-bottom:0}.vertical-form-item .ant-form-item-label>label{margin-bottom:0}.ant-form-item-has-error .ant-form-item-label>label{color:#ff4d4f}.ant-form-item-required:before{display:inline-block;margin-right:4px;color:#ff4d4f;font-size:14px;font-family:SimSun,sans-serif;line-height:1;content:"*"}.file\:mr-4::file-selector-button{margin-right:1rem}.file\:rounded::file-selector-button{border-radius:.25rem}.file\:border-0::file-selector-button{border-width:0px}.file\:bg-blue-50::file-selector-button{--tw-bg-opacity: 1;background-color:rgb(239 246 255 / var(--tw-bg-opacity, 1))}.file\:px-2::file-selector-button{padding-left:.5rem;padding-right:.5rem}.file\:py-1::file-selector-button{padding-top:.25rem;padding-bottom:.25rem}.file\:text-sm::file-selector-button{font-size:.875rem;line-height:1.25rem}.file\:font-medium::file-selector-button{font-weight:500}.file\:text-blue-700::file-selector-button{--tw-text-opacity: 1;color:rgb(29 78 216 / var(--tw-text-opacity, 1))}.hover\:file\:bg-blue-100::file-selector-button:hover{--tw-bg-opacity: 1;background-color:rgb(219 234 254 / var(--tw-bg-opacity, 1))}
+html,body{width:100%;height:100%}input::-ms-clear,input::-ms-reveal{display:none}*,*:before,*:after{box-sizing:border-box}html{font-family:sans-serif;line-height:1.15;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;-ms-overflow-style:scrollbar;-webkit-tap-highlight-color:rgba(0,0,0,0)}@-ms-viewport{width:device-width}body{margin:0}[tabindex="-1"]:focus{outline:none}hr{box-sizing:content-box;height:0;overflow:visible}h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:.5em;font-weight:500}p{margin-top:0;margin-bottom:1em}abbr[title],abbr[data-original-title]{-webkit-text-decoration:underline dotted;text-decoration:underline;text-decoration:underline dotted;border-bottom:0;cursor:help}address{margin-bottom:1em;font-style:normal;line-height:inherit}input[type=text],input[type=password],input[type=number],textarea{-webkit-appearance:none}ol,ul,dl{margin-top:0;margin-bottom:1em}ol ol,ul ul,ol ul,ul ol{margin-bottom:0}dt{font-weight:500}dd{margin-bottom:.5em;margin-left:0}blockquote{margin:0 0 1em}dfn{font-style:italic}b,strong{font-weight:bolder}small{font-size:80%}sub,sup{position:relative;font-size:75%;line-height:0;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}pre,code,kbd,samp{font-size:1em;font-family:SFMono-Regular,Consolas,Liberation Mono,Menlo,Courier,monospace}pre{margin-top:0;margin-bottom:1em;overflow:auto}figure{margin:0 0 1em}img{vertical-align:middle;border-style:none}a,area,button,[role=button],input:not([type=range]),label,select,summary,textarea{touch-action:manipulation}table{border-collapse:collapse}caption{padding-top:.75em;padding-bottom:.3em;text-align:left;caption-side:bottom}input,button,select,optgroup,textarea{margin:0;color:inherit;font-size:inherit;font-family:inherit;line-height:inherit}button,input{overflow:visible}button,select{text-transform:none}button,html [type=button],[type=reset],[type=submit]{-webkit-appearance:button}button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{padding:0;border-style:none}input[type=radio],input[type=checkbox]{box-sizing:border-box;padding:0}input[type=date],input[type=time],input[type=datetime-local],input[type=month]{-webkit-appearance:listbox}textarea{overflow:auto;resize:vertical}fieldset{min-width:0;margin:0;padding:0;border:0}legend{display:block;width:100%;max-width:100%;margin-bottom:.5em;padding:0;color:inherit;font-size:1.5em;line-height:inherit;white-space:normal}progress{vertical-align:baseline}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{outline-offset:-2px;-webkit-appearance:none}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{font:inherit;-webkit-appearance:button}output{display:inline-block}summary{display:list-item}template{display:none}[hidden]{display:none!important}mark{padding:.2em;background-color:#feffe6}.rjsf-form{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif}.vertical-form-item .ant-form-item-label{padding-bottom:0!important;margin-bottom:0}.vertical-form-item .ant-form-item-label>label{margin-bottom:0}.ant-form-item-has-error .ant-form-item-label>label{color:#ff4d4f}.ant-form-item-required:before{display:inline-block;margin-right:4px;color:#ff4d4f;font-size:14px;font-family:SimSun,sans-serif;line-height:1;content:"*"}

package/examples/conditional-v2-example.tsx

@@ -0,0 +1,64 @@
+import React from 'react';
+import { ExtendedForm } from '../src/ExtendedForm';
+import { RJSFSchema, UiSchema } from '@rjsf/utils';
+import { useConditionalUi, UiRule } 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: (data) => !data.requiresShipping,
+      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

@@ -0,0 +1,211 @@
+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}
+    />
+  );
+}

package/examples/form-devtools-example.tsx

@@ -0,0 +1,386 @@
+import React, { useState } from 'react';
+import Form from '@rjsf/antd';
+import { IChangeEvent } from '@rjsf/core';
+import { RJSFSchema, UiSchema } from '@rjsf/utils';
+import validator from '@rjsf/validator-ajv8';
+import {
+  Card,
+  Collapse,
+  Badge,
+  Tag,
+  Space,
+  Switch,
+  Typography,
+  Alert,
+} from 'antd';
+import {
+  Rule,
+  UiEffect,
+  SchemaEffect,
+  ValidationEffect,
+} from '../src/conditionals/v2/types';
+import {
+  useConditionalUi,
+  useConditionalSchema,
+  useConditionalValidation,
+} from '../src/conditionals/v2';
+import { useFormDevTools } from '../src/hooks/useFormDevTools';
+
+const { Panel } = Collapse;
+const { Text } = Typography;
+
+// Base schema
+const baseSchema: RJSFSchema = {
+  type: 'object',
+  title: 'Form with DevTools Example',
+  properties: {
+    country: {
+      type: 'string',
+      title: 'Country',
+      enum: ['USA', 'Canada', 'UK', 'Other'],
+    },
+    requiresShipping: {
+      type: 'boolean',
+      title: 'Requires Shipping?',
+    },
+    shippingAddress: {
+      type: 'object',
+      title: 'Shipping Address',
+      properties: {
+        street: { type: 'string', title: 'Street' },
+        city: { type: 'string', title: 'City' },
+        state: { type: 'string', title: 'State' },
+        zip: { type: 'string', title: 'ZIP Code' },
+      },
+    },
+    maritalStatus: {
+      type: 'string',
+      title: 'Marital Status',
+      enum: ['single', 'married', 'divorced', 'widowed'],
+    },
+    spouseName: {
+      type: 'string',
+      title: 'Spouse Name',
+    },
+  },
+};
+
+// Base UI schema
+const baseUiSchema: UiSchema = {
+  'ui:order': [
+    'country',
+    'requiresShipping',
+    'shippingAddress',
+    'maritalStatus',
+    'spouseName',
+  ],
+};
+
+// UI Rules
+const uiRules: Rule<UiEffect>[] = [
+  {
+    name: 'Hide shipping address when not required',
+    condition: formData => !formData.requiresShipping,
+    effect: [
+      { op: 'add', path: '/shippingAddress/ui:widget', value: 'hidden' },
+    ],
+  },
+  {
+    name: 'Show state dropdown for US/Canada',
+    condition: formData =>
+      formData.country === 'USA' || formData.country === 'Canada',
+    effect: [
+      {
+        op: 'add',
+        path: '/shippingAddress/state/ui:widget',
+        value: 'select',
+      },
+    ],
+  },
+];
+
+// Schema Rules
+const schemaRules: Rule<SchemaEffect>[] = [
+  {
+    name: 'Add spouse fields when married',
+    condition: formData => formData.maritalStatus === 'married',
+    effect: [{ op: 'add', path: '/required/-', value: 'spouseName' }],
+  },
+  {
+    name: 'Remove spouse field when not married',
+    condition: formData => formData.maritalStatus !== 'married',
+    effect: [{ op: 'remove', path: '/properties/spouseName' }],
+  },
+];
+
+// Validation Rules
+const validationRules: Rule<ValidationEffect>[] = [
+  {
+    name: 'US ZIP code format validation',
+    effect: {
+      name: 'US ZIP code format',
+      isActive: formData =>
+        formData.country === 'USA' && formData.requiresShipping,
+      validate: (errors, formData) => {
+        if (
+          formData.shippingAddress?.zip &&
+          !/^\d{5}(-\d{4})?$/.test(formData.shippingAddress.zip)
+        ) {
+          if (!errors.shippingAddress) errors.shippingAddress = {};
+          if (!errors.shippingAddress.zip) errors.shippingAddress.zip = {};
+          errors.shippingAddress.zip.__errors = [
+            'ZIP code must be XXXXX or XXXXX-XXXX format',
+          ];
+        }
+      },
+    },
+  },
+  {
+    name: 'Canadian postal code validation',
+    effect: {
+      name: 'Canadian postal code',
+      isActive: formData =>
+        formData.country === 'Canada' && formData.requiresShipping,
+      validate: (errors, formData) => {
+        if (
+          formData.shippingAddress?.zip &&
+          !/^[A-Z]\d[A-Z] \d[A-Z]\d$/.test(formData.shippingAddress.zip)
+        ) {
+          if (!errors.shippingAddress) errors.shippingAddress = {};
+          if (!errors.shippingAddress.zip) errors.shippingAddress.zip = {};
+          errors.shippingAddress.zip.__errors = [
+            'Postal code must be A1A 1A1 format',
+          ];
+        }
+      },
+    },
+  },
+];
+
+// DevTools Panel Component
+const DevToolsPanel: React.FC<{
+  devTools: ReturnType<typeof useFormDevTools>;
+}> = ({ devTools }) => {
+  const { evaluations, activeRules, hasErrors, errors, summary } = devTools;
+
+  return (
+    <Card title='Form DevTools' style={{ marginTop: 24 }}>
+      <Space direction='vertical' style={{ width: '100%' }}>
+        {/* Summary */}
+        <Alert
+          message={
+            <Space>
+              <Text>Total Rules: {summary.totalRules}</Text>
+              <Badge
+                count={summary.activeCount}
+                style={{ backgroundColor: '#52c41a' }}
+              />
+              <Text>Active</Text>
+              {hasErrors && (
+                <>
+                  <Badge count={summary.errorCount} />
+                  <Text>Errors</Text>
+                </>
+              )}
+            </Space>
+          }
+          type={hasErrors ? 'warning' : 'info'}
+        />
+
+        {/* Errors */}
+        {hasErrors && (
+          <Alert
+            message='Rule Evaluation Errors'
+            description={
+              <ul>
+                {errors.map((error, idx) => (
+                  <li key={idx}>
+                    <Text type='danger'>
+                      {error.pillar} Rule "{error.ruleName}": {error.error}
+                    </Text>
+                  </li>
+                ))}
+              </ul>
+            }
+            type='error'
+          />
+        )}
+
+        {/* Rule Details */}
+        <Collapse defaultActiveKey={['ui']}>
+          <Panel
+            header={`UI Rules (${activeRules.ui.length} active)`}
+            key='ui'
+            extra={
+              <Badge
+                count={activeRules.ui.length}
+                style={{ backgroundColor: '#52c41a' }}
+              />
+            }
+          >
+            {evaluations
+              .filter(e => e.pillar === 'UI')
+              .map((evaluation, idx) => (
+                <div key={idx} style={{ marginBottom: 8 }}>
+                  <Tag color={evaluation.active ? 'green' : 'default'}>
+                    {evaluation.active ? '✓' : '○'}
+                  </Tag>
+                  <Text>{evaluation.ruleName}</Text>
+                  {evaluation.error && (
+                    <Text type='danger'> (Error: {evaluation.error})</Text>
+                  )}
+                </div>
+              ))}
+          </Panel>
+
+          <Panel
+            header={`Schema Rules (${activeRules.schema.length} active)`}
+            key='schema'
+            extra={
+              <Badge
+                count={activeRules.schema.length}
+                style={{ backgroundColor: '#52c41a' }}
+              />
+            }
+          >
+            {evaluations
+              .filter(e => e.pillar === 'Schema')
+              .map((evaluation, idx) => (
+                <div key={idx} style={{ marginBottom: 8 }}>
+                  <Tag color={evaluation.active ? 'green' : 'default'}>
+                    {evaluation.active ? '✓' : '○'}
+                  </Tag>
+                  <Text>{evaluation.ruleName}</Text>
+                  {evaluation.error && (
+                    <Text type='danger'> (Error: {evaluation.error})</Text>
+                  )}
+                </div>
+              ))}
+          </Panel>
+
+          <Panel
+            header={`Validation Rules (${activeRules.validation.length} active)`}
+            key='validation'
+            extra={
+              <Badge
+                count={activeRules.validation.length}
+                style={{ backgroundColor: '#52c41a' }}
+              />
+            }
+          >
+            {evaluations
+              .filter(e => e.pillar === 'Validation')
+              .map((evaluation, idx) => (
+                <div key={idx} style={{ marginBottom: 8 }}>
+                  <Tag color={evaluation.active ? 'green' : 'default'}>
+                    {evaluation.active ? '✓' : '○'}
+                  </Tag>
+                  <Text>{evaluation.ruleName}</Text>
+                  {evaluation.error && (
+                    <Text type='danger'> (Error: {evaluation.error})</Text>
+                  )}
+                </div>
+              ))}
+          </Panel>
+        </Collapse>
+      </Space>
+    </Card>
+  );
+};
+
+export default function FormDevToolsExample() {
+  const [formData, setFormData] = useState({});
+  const [devToolsEnabled, setDevToolsEnabled] = useState(true);
+  const [logToConsole, setLogToConsole] = useState(false);
+  const [captureHistory, setCaptureHistory] = useState(false);
+
+  // Apply conditional logic
+  const conditionalUiSchema = useConditionalUi(uiRules, baseUiSchema, formData);
+  const conditionalSchema = useConditionalSchema(
+    schemaRules,
+    baseSchema,
+    formData
+  );
+  const customValidate = useConditionalValidation(validationRules, formData);
+
+  // Use DevTools
+  const devTools = useFormDevTools(
+    formData,
+    uiRules,
+    schemaRules,
+    validationRules,
+    {
+      enabled: devToolsEnabled,
+      logToConsole,
+      captureHistory,
+      historySize: 10,
+    }
+  );
+
+  const handleChange = (e: IChangeEvent) => {
+    setFormData(e.formData);
+  };
+
+  return (
+    <div style={{ padding: '24px', maxWidth: '1200px', margin: '0 auto' }}>
+      <Card title='DevTools Settings' style={{ marginBottom: 24 }}>
+        <Space>
+          <label>
+            <Switch checked={devToolsEnabled} onChange={setDevToolsEnabled} />
+            <Text style={{ marginLeft: 8 }}>Enable DevTools</Text>
+          </label>
+          <label>
+            <Switch checked={logToConsole} onChange={setLogToConsole} />
+            <Text style={{ marginLeft: 8 }}>Log to Console</Text>
+          </label>
+          <label>
+            <Switch checked={captureHistory} onChange={setCaptureHistory} />
+            <Text style={{ marginLeft: 8 }}>Capture History</Text>
+          </label>
+        </Space>
+      </Card>
+
+      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24 }}>
+        <div>
+          <Form
+            schema={conditionalSchema}
+            uiSchema={conditionalUiSchema}
+            formData={formData}
+            onChange={handleChange}
+            validator={validator}
+            customValidate={customValidate}
+          />
+        </div>
+
+        <div>
+          {devToolsEnabled && <DevToolsPanel devTools={devTools} />}
+
+          {captureHistory && devTools.history.length > 0 && (
+            <Card title='History' style={{ marginTop: 24 }}>
+              <Text>History entries: {devTools.history.length}</Text>
+              <div style={{ maxHeight: 200, overflow: 'auto', marginTop: 8 }}>
+                {devTools.history.map((entry, idx) => (
+                  <div
+                    key={idx}
+                    style={{
+                      marginBottom: 8,
+                      padding: 8,
+                      background: '#f0f0f0',
+                    }}
+                  >
+                    <Text type='secondary'>
+                      {new Date(entry.timestamp).toLocaleTimeString()}
+                    </Text>
+                    <pre style={{ fontSize: 12, margin: 0 }}>
+                      {JSON.stringify(entry.formData, null, 2)}
+                    </pre>
+                  </div>
+                ))}
+              </div>
+            </Card>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}