extended-dynamic-forms 0.3.6 → 0.3.7

package/README.md

@@ -24,6 +24,14 @@ Extended Dynamic Forms is an extension library for React JSON Schema Form (RJSF)
 - **25+ Ant Design components** for professional UI
 - **TypeScript-first** development with full type safety
 
+### Ant Design Prop Pass-through
+
+All custom widgets built on Ant Design components forward their props via `ui:options`. For example, Rate, Slider, DatePicker, Input, InputNumber, ColorPicker, and TimePicker can be configured using the same prop names from AntD. In addition, you can customize the containing `Form.Item` using `ui:options.formItem`. See docs/custom-widgets-configuration.md for details and examples.
+
+- DatePicker notes:
+  - JSON-only flags: `disablePastDates`, `disableFutureDates`, `disableWeekends` (builds `disabledDate` internally)
+  - Range support: set `ui:options.range: true` to render AntD `RangePicker` (see examples below)
+
 ## Installation
 
 **Note:** This library currently requires local development setup and cannot be installed via npm due to local file dependencies.
@@ -345,6 +353,88 @@ Common patterns for migrating from function-based conditions:
 }
 ```
 
+#### Text Input with Variant and Auto-complete
+```json
+{
+  "schema": { "type": "string", "title": "Username" },
+  "uiSchema": {
+    "ui:widget": "text",
+    "ui:options": {
+      "variant": "outlined",
+      "autoFocus": true,
+      "autoComplete": "username",
+      "allowClear": true
+    }
+  }
+}
+```
+
+#### Date Range (RangePicker)
+```json
+{
+  "schema": {
+    "type": "array",
+    "title": "Date Range",
+    "items": { "type": "string" },
+    "minItems": 2,
+    "maxItems": 2
+  },
+  "uiSchema": {
+    "ui:widget": "date",
+    "ui:options": {
+      "range": true,
+      "format": "YYYY-MM-DD",
+      "placeholder": ["Start date", "End date"],
+      "picker": "date"
+    }
+  }
+}
+```
+
+With time selection:
+```json
+{
+  "schema": {
+    "type": "array",
+    "title": "Date Range With Time",
+    "items": { "type": "string" },
+    "minItems": 2,
+    "maxItems": 2
+  },
+  "uiSchema": {
+    "ui:widget": "date",
+    "ui:options": {
+      "range": true,
+      "showTime": true,
+      "format": "YYYY-MM-DD HH:mm",
+      "placeholder": ["Start date/time", "End date/time"]
+    }
+  }
+}
+```
+
+Month range:
+```json
+{
+  "schema": {
+    "type": "array",
+    "title": "Month Range",
+    "items": { "type": "string" },
+    "minItems": 2,
+    "maxItems": 2
+  },
+  "uiSchema": {
+    "ui:widget": "date",
+    "ui:options": {
+      "range": true,
+      "picker": "month",
+      "format": "YYYY-MM",
+      "placeholder": ["Start month", "End month"]
+    }
+  }
+}
+```
+
 #### Number Input with Range
 ```json
 {
@@ -394,6 +484,25 @@ Common patterns for migrating from function-based conditions:
 }
 ```
 
+#### Choice Widget with AntD props (Dropdown)
+```json
+{
+  "schema": { "type": "string", "title": "Country" },
+  "uiSchema": {
+    "ui:widget": "choice",
+    "ui:options": {
+      "choiceConfig": {
+        "presentationMode": "dropdown",
+        "dataSource": { "type": "static", "options": [
+          { "label": "USA", "value": "us" }, { "label": "UK", "value": "uk" }
+        ]},
+        "antd": { "select": { "dropdownMatchSelectWidth": 280, "placement": "bottomLeft" } }
+      }
+    }
+  }
+}
+```
+
 #### Choice Widget (Radio Group)
 ```json
 {
@@ -459,7 +568,7 @@ Common patterns for migrating from function-based conditions:
     "format": "data-url"
   },
   "uiSchema": {
-    "ui:widget": "FileUploadWidget",
+    "ui:widget": "fileUpload",
     "ui:options": {
       "accept": ".pdf,.doc,.docx",
       "maxSize": 5242880,
@@ -469,6 +578,23 @@ Common patterns for migrating from function-based conditions:
 }
 ```
 
+#### File Upload (Ant Upload options)
+```json
+{
+  "schema": { "type": "string", "title": "Profile Picture" },
+  "uiSchema": {
+    "ui:widget": "fileUpload",
+    "ui:options": {
+      "useAntUpload": true,
+      "listType": "picture-card",
+      "showUploadList": { "showPreviewIcon": true, "showRemoveIcon": true },
+      "maxCount": 1,
+      "accept": "image/*"
+    }
+  }
+}
+```
+
 #### Color Picker
 ```json
 {

package/dist/icons/LucideIcon.d.ts

@@ -0,0 +1,11 @@
+import { default as React } from 'react';
+
+export interface LucideIconProps {
+    name: string;
+    size?: number;
+    color?: string;
+    strokeWidth?: number;
+    className?: string;
+    style?: React.CSSProperties;
+}
+export declare const LucideIcon: React.FC<LucideIconProps>;