@ilife-tech/react-application-flow-renderer 1.2.98 → 1.2.100

package/README.md

@@ -1,12 +1,14 @@
 # React Dynamic Form Renderer
 
-A powerful and flexible React package for rendering dynamic forms with advanced validation, conditional logic, and third-party API integration capabilities.
+A powerful and flexible React package for rendering dynamic forms with advanced validation,
+conditional logic, and third-party API integration capabilities.
 
 [![npm version](https://img.shields.io/npm/v/@ilife-tech/react-application-flow-renderer.svg)](https://www.npmjs.com/package/@ilife-tech/react-application-flow-renderer)
 [![license](https://img.shields.io/npm/l/@ilife-tech/react-application-flow-renderer.svg)](https://github.com/ilife-technologies/react-dynamic-form-renderer/blob/main/LICENSE)
 
 ## Table of Contents
 
+- [Folder structure](#folder-structure)
 - [Features](#features)
 - [Prerequisites](#prerequisites)
 - [Installation](#installation)
@@ -20,6 +22,12 @@ A powerful and flexible React package for rendering dynamic forms with advanced
 - [Troubleshooting](#troubleshooting)
 - [Examples & Best Practices](#examples--best-practices)
 
+## Folder structure
+
+This package uses a **layer-only** structure (components, context, hooks, utils, theme, etc.). For
+the full layout and where to place new modules, see
+[docs/coding-standards/folder-structure.md](docs/coding-standards/folder-structure.md).
+
 ## Features
 
 ### Core Capabilities
@@ -104,7 +112,8 @@ const App = () => {
 
 ### Real-World Example
 
-Below is a comprehensive real-world implementation showcasing advanced features like API integration, state management, and theming:
+Below is a comprehensive real-world implementation showcasing advanced features like API
+integration, state management, and theming:
 
 ```jsx
 import React, { useState, useEffect, useCallback, useMemo } from 'react';
@@ -451,7 +460,8 @@ export default App;
 
 ## Form Schema Structure
 
-The form structure is defined by a JSON schema that specifies question groups and their fields. Each form consists of one or more question groups, each containing multiple field definitions.
+The form structure is defined by a JSON schema that specifies question groups and their fields. Each
+form consists of one or more question groups, each containing multiple field definitions.
 
 ### Question Group Structure
 
@@ -503,11 +513,13 @@ The action schema defines form buttons and their behaviors:
 
 ## API Integration
 
-The package provides robust third-party API integration capabilities, allowing forms to fetch data, populate options, and submit data to external services.
+The package provides robust third-party API integration capabilities, allowing forms to fetch data,
+populate options, and submit data to external services.
 
 ### Basic API Integration
 
-API integration is handled through the `onApiTrigger` prop, which receives API trigger events from form fields:
+API integration is handled through the `onApiTrigger` prop, which receives API trigger events from
+form fields:
 
 ```jsx
 import React from 'react';
@@ -570,7 +582,8 @@ export default MyForm;
 
 ### Implementing the API Handler
 
-The API handler function processes API triggers and returns updates to the form. Here's a practical example based on the package's example implementation:
+The API handler function processes API triggers and returns updates to the form. Here's a practical
+example based on the package's example implementation:
 
 ```javascript
 // services/apiService.js
@@ -681,7 +694,8 @@ export const createApiResponse = (updates = {}) => {
 
 ### Advanced API Integration Example
 
-Here's a more comprehensive example showing how to handle complex API integration with request queuing and response mapping:
+Here's a more comprehensive example showing how to handle complex API integration with request
+queuing and response mapping:
 
 ```javascript
 // services/api/handlers/dropdownApiHandler.js
@@ -796,7 +810,8 @@ The `DynamicForm` component accepts the following props:
 
 #### `questionGroups`
 
-An array of question group objects that defines the form structure. Each group contains questions (fields) to render.
+An array of question group objects that defines the form structure. Each group contains questions
+(fields) to render.
 
 ```javascript
 const questionGroups = [
@@ -823,7 +838,8 @@ const actionSchema = [
 
 #### `onSubmit`
 
-Callback function called when a form action is triggered. Receives the form state and action identifier.
+Callback function called when a form action is triggered. Receives the form state and action
+identifier.
 
 ```javascript
 const handleSubmit = (formState, action) => {
@@ -910,7 +926,8 @@ The package supports a wide range of field types to handle various input require
 
 ## Input Masking and Security
 
-The React Dynamic Form Renderer includes advanced **dual masking system** for sensitive data fields, providing both input formatting and security masking capabilities.
+The React Dynamic Form Renderer includes advanced **dual masking system** for sensitive data fields,
+providing both input formatting and security masking capabilities.
 
 ### Dual Masking System
 
@@ -981,7 +998,8 @@ You can define custom masking patterns using:
 
 ### Eye Icon Toggle
 
-Fields with security masking automatically display an eye icon (👁️/🙈) that allows users to toggle between:
+Fields with security masking automatically display an eye icon (👁️/🙈) that allows users to toggle
+between:
 
 - **Masked View**: Shows security masked value (e.g., `***-**-6789`)
 - **Original View**: Shows formatted value (e.g., `123-45-6789`)
@@ -1061,7 +1079,8 @@ console.log('Mask Config:', maskConfig);
 
 ## Conditional Logic
 
-The Dynamic Form Renderer provides powerful conditional logic capabilities through the `pageRules` and `pageRuleGroup` props.
+The Dynamic Form Renderer provides powerful conditional logic capabilities through the `pageRules`
+and `pageRuleGroup` props.
 
 ### PageRules
 
@@ -1083,7 +1102,8 @@ const pageRules = [
 
 ### Enhanced PageRuleGroup
 
-The enhanced `pageRuleGroup` feature provides sophisticated boolean expressions for complex conditional logic:
+The enhanced `pageRuleGroup` feature provides sophisticated boolean expressions for complex
+conditional logic:
 
 ```javascript
 // New array-based format with complex boolean expressions
@@ -1127,7 +1147,9 @@ const pageRuleGroup = [
 }
 ```
 
-For detailed documentation on the enhanced pageRuleGroup feature, see the [page-rule-group-enhancement.md](docs/page-rule-group-implementation/page-rule-group-enhancement.md) file.
+For detailed documentation on the enhanced pageRuleGroup feature, see the
+[page-rule-group-enhancement.md](docs/page-rule-group-implementation/page-rule-group-enhancement.md)
+file.
 
 ## Advanced Configuration
 
@@ -1161,15 +1183,18 @@ import DynamicFormInner from '@ilife-tech/react-application-flow-renderer/src/co
 </FormProvider>;
 ```
 
-Note: The top-level `DynamicForm` abstraction may not expose these knobs directly. Use `FormProvider` for fine-grained control.
+Note: The top-level `DynamicForm` abstraction may not expose these knobs directly. Use
+`FormProvider` for fine-grained control.
 
 ### Toast Notifications
 
-The Dynamic Form Renderer uses react-toastify for displaying notifications such as error messages, warnings, and success confirmations.
+The Dynamic Form Renderer uses react-toastify for displaying notifications such as error messages,
+warnings, and success confirmations.
 
 #### Toast Configuration
 
-The form renderer integrates with your application's react-toastify setup. **Important: Your host application MUST include a `<ToastContainer />` component** for notifications to appear.
+The form renderer integrates with your application's react-toastify setup. **Important: Your host
+application MUST include a `<ToastContainer />` component** for notifications to appear.
 
 ```jsx
 // Required: Import react-toastify in your host application
@@ -1198,7 +1223,8 @@ const App = () => {
 
 #### API Response Format for Toast Notifications
 
-When implementing the `onApiTrigger` handler, you can return success and error messages that will be displayed as toast notifications:
+When implementing the `onApiTrigger` handler, you can return success and error messages that will be
+displayed as toast notifications:
 
 ```javascript
 // Example of API trigger handler with toast notifications
@@ -1236,11 +1262,13 @@ If your application already uses react-toastify, the renderer will:
 1. Use your application's react-toastify instance
 2. Respect your toast styling and configuration
 
-**Important:** Only one `<ToastContainer />` should be rendered in your application tree. The package will not render its own ToastContainer - this must be provided by the host application.
+**Important:** Only one `<ToastContainer />` should be rendered in your application tree. The
+package will not render its own ToastContainer - this must be provided by the host application.
 
 ### Toast Configuration
 
-The Dynamic Form Renderer uses react-toastify for displaying notifications. You can configure toast behavior using the `toastConfig` prop:
+The Dynamic Form Renderer uses react-toastify for displaying notifications. You can configure toast
+behavior using the `toastConfig` prop:
 
 ```jsx
 <DynamicForm
@@ -1278,7 +1306,8 @@ To properly display toast notifications:
 
 #### API Response Format for Toast Messages
 
-When implementing custom API triggers with `onApiTrigger`, your handler should return a promise that resolves to an object with the following structure to properly display toast notifications:
+When implementing custom API triggers with `onApiTrigger`, your handler should return a promise that
+resolves to an object with the following structure to properly display toast notifications:
 
 ```javascript
 const handleApiTrigger = async (triggerData) => {
@@ -1318,8 +1347,10 @@ const handleApiTrigger = async (triggerData) => {
 
 #### Troubleshooting
 
-- **No toasts appear**: Ensure your application has a `<ToastContainer />` component and has imported the CSS
-- **\_useSyncExternalStore error**: This usually indicates a version compatibility issue between React and react-toastify. For React 17, use react-toastify v9.1.x
+- **No toasts appear**: Ensure your application has a `<ToastContainer />` component and has
+  imported the CSS
+- **\_useSyncExternalStore error**: This usually indicates a version compatibility issue between
+  React and react-toastify. For React 17, use react-toastify v9.1.x
 - **Multiple toasts appear**: Ensure you only have one `<ToastContainer />` in your application
 
 ### Theme Customization
@@ -1502,7 +1533,8 @@ const validationSchema = [
 
 ### CardList Configuration
 
-The `CardListField` component enables dynamic form arrays with complete validation and state management:
+The `CardListField` component enables dynamic form arrays with complete validation and state
+management:
 
 ```javascript
 const cardListQuestion = {
@@ -1921,8 +1953,15 @@ const DynamicApiForm = ({ formId }) => {
 
 ## Conclusion
 
-The React Dynamic Form Renderer package provides a comprehensive solution for creating dynamic, interactive forms with advanced validation, conditional logic, and third-party API integration. By leveraging the JSON schema approach, you can rapidly develop complex forms without sacrificing flexibility or control.
+The React Dynamic Form Renderer package provides a comprehensive solution for creating dynamic,
+interactive forms with advanced validation, conditional logic, and third-party API integration. By
+leveraging the JSON schema approach, you can rapidly develop complex forms without sacrificing
+flexibility or control.
 
-For more detailed documentation, refer to the [developer user guide](./docs/developer-user-guide.md) or check out the [example implementations](./example) included with the package. Contributors: see [contributing](./docs/contributing.md), [running](./docs/running.md), and [folder structure](./docs/coding-standards/folder-structure.md) for setup and development workflow.
+For more detailed documentation, refer to the [developer user guide](./docs/developer-user-guide.md)
+or check out the [example implementations](./example) included with the package. Contributors: see
+[contributing](./docs/contributing.md), [running](./docs/running.md), and
+[folder structure](./docs/coding-standards/folder-structure.md) for setup and development workflow.
 
-We welcome contributions and feedback! Please file issues or submit pull requests on our [GitHub repository](https://github.com/ilife-technologies/react-dynamic-form-renderer).
+We welcome contributions and feedback! Please file issues or submit pull requests on our
+[GitHub repository](https://github.com/ilife-technologies/react-dynamic-form-renderer).