extended-dynamic-forms 0.1.21 → 0.1.23

package/examples/global-ui-rules-example.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { ExtendedForm } from '../src/ExtendedForm';
 import { RJSFSchema, UiSchema, IChangeEvent } from '@rjsf/utils';
-import { useConditionalUi, UiRule } from '../src/conditionals/v2';
+import { useConditionalUi, UiRule, JsonLogicRule } from '../src/conditionals/v2';
 
 /**
  * Global UI Rules Example
@@ -175,7 +175,7 @@ const globalUiRules: UiRule[] = [
   // Rule 1: Show shipping address when shipping is required
   {
     name: 'Show shipping address when shipping required',
-    condition: (formData) => formData.requiresShipping === true,
+    condition: { "===": [{ "var": "requiresShipping" }, true] } as JsonLogicRule,
     effect: [
       { op: 'remove', path: '/shippingAddress/ui:widget' }
     ],
@@ -185,7 +185,7 @@ const globalUiRules: UiRule[] = [
   // Rule 2: Show delivery instructions when shipping is required
   {
     name: 'Show delivery instructions when shipping required',
-    condition: (formData) => formData.requiresShipping === true,
+    condition: { "===": [{ "var": "requiresShipping" }, true] } as JsonLogicRule,
     effect: [
       { op: 'replace', path: '/deliveryInstructions/ui:widget', value: 'textarea' }
     ],
@@ -195,7 +195,7 @@ const globalUiRules: UiRule[] = [
   // Rule 3: Show express shipping option when shipping is required
   {
     name: 'Show express shipping option when shipping required',
-    condition: (formData) => formData.requiresShipping === true,
+    condition: { "===": [{ "var": "requiresShipping" }, true] } as JsonLogicRule,
     effect: [
       { op: 'remove', path: '/expressShipping/ui:widget' }
     ],
@@ -205,9 +205,12 @@ const globalUiRules: UiRule[] = [
   // Rule 4: Show state dropdown only for USA
   {
     name: 'Show state field for USA',
-    condition: (formData) => 
-      formData.requiresShipping === true && 
-      formData.shippingAddress?.country === 'USA',
+    condition: { 
+      "and": [
+        { "===": [{ "var": "requiresShipping" }, true] },
+        { "===": [{ "var": "shippingAddress.country" }, "USA"] }
+      ]
+    } as JsonLogicRule,
     effect: [
       { op: 'remove', path: '/shippingAddress/state/ui:widget' },
       { op: 'add', path: '/shippingAddress/province/ui:widget', value: 'hidden' },
@@ -219,9 +222,12 @@ const globalUiRules: UiRule[] = [
   // Rule 5: Show province dropdown only for Canada
   {
     name: 'Show province field for Canada',
-    condition: (formData) => 
-      formData.requiresShipping === true && 
-      formData.shippingAddress?.country === 'Canada',
+    condition: { 
+      "and": [
+        { "===": [{ "var": "requiresShipping" }, true] },
+        { "===": [{ "var": "shippingAddress.country" }, "Canada"] }
+      ]
+    } as JsonLogicRule,
     effect: [
       { op: 'add', path: '/shippingAddress/state/ui:widget', value: 'hidden' },
       { op: 'remove', path: '/shippingAddress/province/ui:widget' },
@@ -233,9 +239,12 @@ const globalUiRules: UiRule[] = [
   // Rule 6: Show region text field for Mexico and Other
   {
     name: 'Show region field for Mexico and Other countries',
-    condition: (formData) => 
-      formData.requiresShipping === true && 
-      ['Mexico', 'Other'].includes(formData.shippingAddress?.country),
+    condition: { 
+      "and": [
+        { "===": [{ "var": "requiresShipping" }, true] },
+        { "in": [{ "var": "shippingAddress.country" }, ["Mexico", "Other"]] }
+      ]
+    } as JsonLogicRule,
     effect: [
       { op: 'add', path: '/shippingAddress/state/ui:widget', value: 'hidden' },
       { op: 'add', path: '/shippingAddress/province/ui:widget', value: 'hidden' },
@@ -247,9 +256,12 @@ const globalUiRules: UiRule[] = [
   // Rule 7: Show international details only for "Other" countries
   {
     name: 'Show international details for non-North American countries',
-    condition: (formData) => 
-      formData.requiresShipping === true && 
-      formData.shippingAddress?.country === 'Other',
+    condition: { 
+      "and": [
+        { "===": [{ "var": "requiresShipping" }, true] },
+        { "===": [{ "var": "shippingAddress.country" }, "Other"] }
+      ]
+    } as JsonLogicRule,
     effect: [
       { op: 'replace', path: '/shippingAddress/internationalDetails/ui:widget', value: 'textarea' }
     ],
@@ -259,9 +271,12 @@ const globalUiRules: UiRule[] = [
   // Rule 8: Reorder fields to put international details at end when visible
   {
     name: 'Reorder fields for international shipping',
-    condition: (formData) => 
-      formData.requiresShipping === true && 
-      formData.shippingAddress?.country === 'Other',
+    condition: { 
+      "and": [
+        { "===": [{ "var": "requiresShipping" }, true] },
+        { "===": [{ "var": "shippingAddress.country" }, "Other"] }
+      ]
+    } as JsonLogicRule,
     effect: [
       { 
         op: 'replace', 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "extended-dynamic-forms",
-  "version": "0.1.21",
+  "version": "0.1.23",
   "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",
@@ -33,10 +33,13 @@
     "lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 10",
     "format": "prettier --write \"src/**/*.{ts,tsx,js,jsx,json,css,md}\"",
     "format:check": "prettier --check \"src/**/*.{ts,tsx,js,jsx,json,css,md}\"",
-    "prepublishOnly": "npm run build:all",
+    "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"
+    "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"
   },
   "keywords": [
     "react",
@@ -95,8 +98,10 @@
     "vitest": "^1.0.0"
   },
   "dependencies": {
+    "@types/json-logic-js": "^2.0.8",
     "date-fns": "^4.1.0",
     "dayjs": "^1.11.13",
+    "json-logic-js": "^2.0.5",
     "json-rules-engine-simplified": "^0.2.0"
   },
   "type": "module"