udp-react-enterprise-component-library 25.18.3 → 25.18.4-alpha.1

package/README.md

@@ -1,337 +1,337 @@
-# `udp-react-enterprise-component-library` Documentation
-
-## Overview
-
-The `udp-react-enterprise-component-library` is the definitive React-based UI component library for building feature-rich, enterprise-grade applications at Univerus. It serves as the top layer in our UI development stack, providing high-level components, integrated business logic, and complete page templates.
-
-This library is built upon a chain of dependencies, each with a specific role:
-1.  **`udp-stencil-component-library`**: The foundation, providing a set of core Web Components built with StencilJS.
-2.  **`udp-react-stencil-component-library`**: A wrapper that makes the Stencil web components seamlessly usable within a React environment.
-3.  **`udp-react-enterprise-component-library` (This Library)**: The final layer that consumes the wrapped Stencil components and adds complex, application-level components, integrated authentication, state management, and enterprise-specific features using the Fluent UI design system.
-
-## Core Concepts
-
-This library is designed to dramatically accelerate development by providing solutions to common enterprise application challenges.
-
-* **🧩 High-Level React Components**: Beyond basic UI elements, this library offers components that structure entire pages (`Shell`), manage complex data interactions (`UdpDataBrowserPage`), and guide users through business processes (`WorkflowContainer`).
-* **🔐 Integrated Authentication**: The library includes a complete authentication solution using MSAL (`AuthProvider`). It handles user login, session management, and access token acquisition, simplifying application security.
-* **🌍 Global State Management**: We use **Zustand** for efficient and predictable state management. The library provides pre-configured stores for shared application state like UI (`shellStore`), user/tenant info (`tenantStore`), API data (`catalogStore`), and more.
-* **📊 Powerful Data Grids & Visualizations**: By leveraging **AG Grid**, the library offers powerful and highly customizable data grids (`AmbientGridTemplate`, `ServerSideUdpGrid`) with built-in support for server-side operations, filtering, sorting, and custom rendering. It also includes a rich set of chart components for data visualization.
-
----
-
-## Build Process & Modular Exports
-
-This library employs an advanced build system that optimizes for both developer experience and runtime performance through intelligent export management.
-
-### Dual Export Strategy
-
-The library provides **dual export patterns** to maximize flexibility and tree-shaking benefits:
-
-1. **Barrel Exports**: All components are exported from the root `index.js` for convenient development:
-  ```js
-  import { FluentButton, FluentDialog, FluentDataTable } from 'udp-react-enterprise-component-library';
-  ```
-
-2. **Modular Exports**: Each component is also available as a direct module import for optimal tree-shaking:
-  ```js
-  import { FluentButton } from 'udp-react-enterprise-component-library/UI/inputs/buttons';
-  import { FluentDialog } from 'udp-react-enterprise-component-library/UI/feedback';
-  import { FluentDataTable } from 'udp-react-enterprise-component-library/UI/dataDisplay/FluentDataTable';
-  ```
-
-### Export Map Generation
-
-During the build process the system performs a glob-based scan of the `src` tree and automatically generates an **export map** (`export-map.json`) that catalogs every component and its corresponding module path. The generator looks for `index.*` files (for example `index.ts` or `index.js`) inside child directories of `src` and treats each discovered index as an export entry. This means you can add a local `index.ts` file in a subfolder and it will be picked up and published automatically.
-
-Example:
-
-Project layout:
-
-```
-src/
-  UI/
-    inputs/
-      buttons/
-        index.ts    <-- exported as `UI/inputs/buttons`
-  utilities/
-    auth/
-      index.js      <-- exported as `utilities/auth`
-```
-
-Resulting `export-map.json` entries:
-
-```json
-{
-  "FluentButton": "UI/inputs/buttons",
-  "AuthProvider": "utilities/auth"
-}
-```
-
-This export map is the source of truth the plugin uses to rewrite barrel imports to modular imports during build.
-
-### Vite Plugin Integration
-
-The `udp-monorepo-plugin` reads the export map and automatically transforms barrel imports into modular imports during the build process. This transformation happens transparently, so developers can write convenient barrel imports while still achieving optimal bundle sizes.
-
-**Example Transformation:**
-```js
-// Developer writes:
-import { FluentButton, FluentDialog } from 'udp-react-enterprise-component-library';
-
-// Plugin transforms to:
-import { FluentButton } from 'udp-react-enterprise-component-library/UI/inputs/buttons';
-import { FluentDialog } from 'udp-react-enterprise-component-library/UI/feedback';
-```
-
-### Tree-Shaking Benefits
-
-This approach delivers the best of both worlds:
-- **Developer Experience**: Clean, simple imports during development
-- **Bundle Optimization**: Automatic tree-shaking eliminates unused components from production bundles
-- **Performance**: Reduced bundle sizes lead to faster load times and better user experience
-- **Maintainability**: Centralized export management without manual import path maintenance
-
----
-
-## Code splitting & chunking
-
-This build system also enables effective code splitting so the bundler can place modules where they're needed instead of producing one large entry bundle.
-
-Key points:
-- Use dynamic `import()` (or framework-level lazy loading) to load routes/pages and large components on demand.
-- The `export-map.json` + `udp-monorepo-plugin` let you write convenient barrel imports while the plugin rewrites them to module-level imports. That makes it much easier for the bundler to identify module boundaries and emit smaller, more focused chunks.
-- Smaller chunks mean faster initial loads and better cache behavior: only code required for the first screen downloads immediately.
-
-Example (developer code):
-```js
-// route-level lazy loading keeps large pages out of the main bundle
-const SupportCaseListPage = React.lazy(() => import('udp-react-enterprise-component-library/SupportCaseList'));
-```
-
-What the bundler sees (after plugin transform):
-```js
-import SupportCaseList from 'udp-react-enterprise-component-library/UDP/SupportCaseList';
-// ...this allows Rollup/Vite to split `SupportCaseList` into its own chunk
-```
-
-
-
-## Getting Started
-
-### Installation
-
-To use the library in your project, install it via npm:
-
-```bash
-npm install udp-react-enterprise-component-library
-```
-
-### Basic Usage with `starter-client`
-
-While you can set up a project from scratch, we highly recommend using the **`starter-client`** application. This template comes pre-configured with the necessary providers, routing, and basic structure, allowing you to start building features immediately.
-
-The `starter-client` sets up the foundational structure for you, which looks like this:
-
-```jsx
-// Example of the setup in starter-client's App.js
-
-import React from 'react';
-import { Shell, ThemeProvider, AuthProvider } from 'udp-react-enterprise-component-library';
-import { BrowserRouter } from 'react-router-dom';
-import UdpRoutes from './routes/UdpRoutes'; // Your application's routes
-
-function App() {
-  return (
-    <BrowserRouter>
-      {/* AuthProvider handles MSAL authentication and provides user context */}
-      <AuthProvider>
-        {/* ThemeProvider applies the Fluent UI theme */}
-        <ThemeProvider>
-          {/* Shell is the main layout component for the entire application */}
-          <Shell siteName="My Application">
-            {/* UdpRoutes contains all your application's page routes */}
-            <UdpRoutes />
-          </Shell>
-        </ThemeProvider>
-      </AuthProvider>
-    </BrowserRouter>
-  );
-}
-
-export default App;
-```
-
----
-
-## Data-Driven Pages & Containers
-
-This library excels at providing pre-built pages and containers that are deeply integrated with our API catalog, enabling rapid development of data-centric features.
-
-### `UdpDataBrowserPage`
-This is a powerful, generic page designed for browsing, filtering, and managing large datasets. It connects directly to an API endpoint defined in the API catalog.
-* **Functionality**: Provides a full-featured data grid experience with minimal configuration.
-* **Features**: Includes advanced search capabilities, column filtering, sorting, pagination, and the ability to perform actions (view, edit, delete) on individual rows.
-* **Use Case**: Ideal for any scenario where users need to view and interact with a list of business objects, such as a list of customers, orders, or assets.
-
-### `UdpMaintenanceEnginePage`
-This component provides a generic "maintenance" screen for performing CRUD (Create, Read, Update, Delete) operations on any entity defined in the API catalog.
-* **Functionality**: It dynamically generates a data grid and corresponding forms for editing, creating, and viewing records.
-* **Use Case**: Perfect for administrative back-office applications or any situation where users need to manage system data directly.
-
-### `InquiryContainer`
-The `InquiryContainer` is designed for building complex data exploration and investigation interfaces. It allows you to create screens where users can navigate through related data entities.
-* **Functionality**: It typically presents a master-detail or a tree-based layout. Users can select an item in a list or tree to see its detailed information and related child entities in a separate panel.
-* **Use Case**: Excellent for investigative analysis, such as exploring a customer's full history, including their orders, support tickets, and contact information, all in one connected view.
-
-### `WorkflowContainer`
-This container is designed to guide users through structured, multi-step business processes.
-* **Functionality**: Manages the state, progression, and UI for a series of defined steps or tasks. It can render different forms or components at each stage of the workflow and handle the logic for moving between steps.
-* **Use Case**: Ideal for processes like new user onboarding, multi-stage approval processes, or complex data entry tasks that need to be broken down into manageable parts.
-
----
-
-## UI Component Reference
-
-The library provides a vast collection of components, categorized by function.
-
-### Layout & Structure
-
-Components for organizing page content and overall application layout.
-* **`Shell`**: The main application wrapper including header, sidebar, and content area.
-* **`Page`, `PageContainer`, `PageContent`**: Components for structuring the content of a page.
-* **`PageHeader`, `PageSectionHeader`**: Headers for pages and sections within a page.
-* **`GridGroup`, `GridRow`, `GridUnit`**: A set of components for creating flexible grid layouts.
-* **`HeaderLayout`, `SideBarTemplate`, `DraggableSidebarTemplate`**: Pre-defined page layouts.
-* **`SplitScreen`**: Creates a resizable split-screen view.
-
-### Navigation
-
-Components for user navigation and flow control.
-* **`NavigationSidebar`, `MiniCollapsibleSidebar`**: The primary application navigation menus.
-* **`UdpTabs`, `FluentSimpleTabs`**: Tab components for organizing content.
-* **`BreadCrumbMenu`**: A breadcrumb component for showing navigation hierarchy.
-* **`AmbientStepper`**: A stepper component to guide users through a sequence of steps.
-* **`AppMenu`, `AppMenuItem`**: Components for building in-app menus.
-* **`BaseTreeMenu`**: A component for creating hierarchical tree menus.
-
-### Buttons
-
-A wide variety of buttons for different user actions and contexts.
-* **`FluentButton`, `FluentCompoundButton`, `FluentIconButton`**: Standard, compound, and icon-only buttons based on Fluent UI.
-* **`IconButtonWithToolTip`**: An icon button that includes a tooltip on hover.
-* **`ActionSpeedDial`**: A floating action button that expands to show more actions.
-* **`AmbientTokenButton`, `AmbientChipButton`, `AmbientCardButton`**: Stylized buttons for specific use cases.
-* **`ToolBarButton`**: Buttons designed for use in toolbars.
-* **`AdvanceButton`**: A button for progressing in a workflow or stepper.
-
-### Forms & Inputs
-
-A comprehensive suite of form controls, primarily designed to work with `react-final-form`.
-
-#### Text & Numeric
-* **`FluentTextField`, `AmbientTextField`**: General-purpose text input fields.
-* **`FluentSearchField`**: A text field specifically styled for search inputs.
-* **`FluentTagField`**: An input for entering and displaying tags.
-* **`KeyValueTextField`**: A specialized field for entering key-value pairs.
-
-#### Selection Controls
-* **`FluentSelectMenu`, `FluentSimpleSelect`**: Dropdown select menus.
-* **`FluentCheckbox`**: A standard checkbox.
-* **`FluentRadioGroup`, `FluentRadio`**: Radio buttons for single selection from a list.
-* **`FluentToggle`**: An on/off switch.
-* **`AmbientToggleButton`, `AmbientToggleButtonGroup`**: A group of toggle buttons.
-* **`FluentScrollLoadAutocompleteMenu`, `AmbientAutoComplete`**: Autocomplete inputs that can load data on scroll.
-
-#### Date & Time Pickers
-* **`FluentDatePicker`, `FluentDateTimePicker`, `FluentTimePicker`**: Controls for selecting dates and times.
-* **`UdpDateSelector`, `UdpTimeSelector`**: Alternative date and time selectors.
-* **`AmbientDateRangeSelector`**: A specialized control for selecting a date range.
-
-#### Specialized Inputs
-* **`FileImportMappingWizard`**: A full wizard component for guiding users through a file import and data mapping process.
-* **`FieldArrayCard`**: A card component for managing a dynamic array of fields in a form.
-* **`CkRichEditor`**: A rich text editor for formatted text input.
-* **`FileUpload`, `DragDropFileUpload`**: Components for file uploads.
-* **`FluentColorPicker`**: A control for selecting a color.
-
-### Data Display
-
-Components for presenting information to the user in various formats.
-
-#### Cards
-* **`AmbientCard`, `FluentCard`**: General-purpose container cards.
-* **`WidgetCard`, `InfoCard`, `QuickViewCard`**: Specialized cards for dashboards and quick information display.
-* **`NewsCard`, `BioCard`, `WorkOrderCard`**: Cards designed for specific types of content.
-* **`AmbientVisualizationCard`**: A card specifically for holding charts and other visualizations.
-
-#### Lists
-* **`AmbientList`, `CompactDataList`**: Flexible list components.
-* **`FluentListElement`, `FluentListItem`**: Components for building custom lists.
-* **`Directory`, `AddressListItem`**: Specialized list formats for directories and addresses.
-* **`CardList`**: A component that renders a list of items as cards.
-
-#### Grids & Tables
-* **`AmbientGridTemplate`, `UdpGridTemplate`**: High-level, feature-rich AG Grid templates.
-* **`ServerSideUdpGrid`, `ClientSideUdpGrid`, `ApiMethodUdpGrid`**: Grid implementations for different data fetching strategies.
-* **`FluentDataTable`**: A simpler, lighter table component.
-* **`NestedGrid`**: A grid that supports expandable rows to show nested child grids.
-
-#### Headers
-* **`PrimaryActionHeader`**: A prominent header with a title and primary action buttons, often used with grids.
-* **`EntityHeader`**: A detailed header for displaying key information about a single data entity.
-* **`SideSheetHeader`**: A standardized header for use in side sheets.
-
-#### Chips, Badges & Tags
-* **`StatusChip`**: A chip designed to display a status (e.g., "Active", "Pending").
-* **`AggregateChip`**: A chip used to display an aggregated value.
-* **`IndicatorChip`**: A general-purpose indicator chip.
-
-#### Timelines
-* **`UdpTimeline`, `FluentTimeline`**: Components for displaying a sequence of events over time.
-* **`MttMainTimeline`**: A multi-threaded timeline for visualizing parallel event streams.
-* **`TimelineCalendar`**: A component that combines a calendar view with a timeline.
-
-### Feedback & Loading
-
-Components for communicating state and progress to the user.
-* **`FluentDialog`**: A modal dialog for important messages or actions.
-* **`AmbientAlert`, `UdpAlert`**: Alert components for displaying messages (success, error, info, warning).
-* **`SideSheet`**: A panel that slides in from the side of the screen, often used for editing or detail views.
-* **`AmbientToast`**: A non-intrusive notification that appears briefly.
-* **`PageLoading`, `LoadingOverlay`, `LoadingIndicator`**: Various styles of loading indicators.
-* **`LinearProgress`, `CircularProgress`**: Progress bars.
-
-### Charts & Visualization
-
-A rich set of components for visualizing data.
-* **`UdpBarChart`, `UdpDonutChart`, `UdpLineChart`, `UdpDistributionChart`**: Standard chart types.
-* **`AmSankeyChart`**: A Sankey diagram for visualizing flows.
-* **`GaugeGraph`, `CircleGaugeWidget`**: Gauge components for displaying a value within a range.
-* **`SparklineWidget`**: A small, inline chart showing a trend.
-
-### Maps
-
-Components for displaying and interacting with geographical data.
-* **`UdpMap`, `FluentMap`, `GeoMap`**: Core map components.
-* **`MapLayout`**: A template for creating complex map-based interfaces with sidebars, toolbars, and popovers.
-* **`UdpMapToolbar`**: A toolbar with common map controls.
-
-### Actions & Workflows
-
-Components related to triggering and managing application actions.
-* **`ActionWrapper`**: A generic wrapper for actions that handles different display modes (modal, side sheet).
-* **`ActionModal`, `ActionSideSheet`**: Components that host action forms in a modal or side sheet.
-* **`ActionForm`**: A standardized form for actions.
-* **`WorkflowContainer`, `WorkflowContent`**: Components for managing multi-step workflows.
-
-### Utility & Miscellaneous
-
-A collection of other useful components and utilities.
-* **`UnityIcon`, `FluentIcon`, `UnityFluentIcon`**: Components for rendering icons from our icon library.
-* **`UserAvatar`**: Displays a user's avatar or initials.
-* **`DiffChecker`**: A component to show the differences between two sets of data.
-* **`Iframe`**: A component for embedding external content.
-* **`FileViewer`, `PDFViewer`, `ImageViewerSideSheet`**: Components for viewing different file types.
-
-
+# `udp-react-enterprise-component-library` Documentation
+
+## Overview
+
+The `udp-react-enterprise-component-library` is the definitive React-based UI component library for building feature-rich, enterprise-grade applications at Univerus. It serves as the top layer in our UI development stack, providing high-level components, integrated business logic, and complete page templates.
+
+This library is built upon a chain of dependencies, each with a specific role:
+1.  **`udp-stencil-component-library`**: The foundation, providing a set of core Web Components built with StencilJS.
+2.  **`udp-react-stencil-component-library`**: A wrapper that makes the Stencil web components seamlessly usable within a React environment.
+3.  **`udp-react-enterprise-component-library` (This Library)**: The final layer that consumes the wrapped Stencil components and adds complex, application-level components, integrated authentication, state management, and enterprise-specific features using the Fluent UI design system.
+
+## Core Concepts
+
+This library is designed to dramatically accelerate development by providing solutions to common enterprise application challenges.
+
+* **🧩 High-Level React Components**: Beyond basic UI elements, this library offers components that structure entire pages (`Shell`), manage complex data interactions (`UdpDataBrowserPage`), and guide users through business processes (`WorkflowContainer`).
+* **🔐 Integrated Authentication**: The library includes a complete authentication solution using MSAL (`AuthProvider`). It handles user login, session management, and access token acquisition, simplifying application security.
+* **🌍 Global State Management**: We use **Zustand** for efficient and predictable state management. The library provides pre-configured stores for shared application state like UI (`shellStore`), user/tenant info (`tenantStore`), API data (`catalogStore`), and more.
+* **📊 Powerful Data Grids & Visualizations**: By leveraging **AG Grid**, the library offers powerful and highly customizable data grids (`AmbientGridTemplate`, `ServerSideUdpGrid`) with built-in support for server-side operations, filtering, sorting, and custom rendering. It also includes a rich set of chart components for data visualization.
+
+---
+
+## Build Process & Modular Exports
+
+This library employs an advanced build system that optimizes for both developer experience and runtime performance through intelligent export management.
+
+### Dual Export Strategy
+
+The library provides **dual export patterns** to maximize flexibility and tree-shaking benefits:
+
+1. **Barrel Exports**: All components are exported from the root `index.js` for convenient development:
+  ```js
+  import { FluentButton, FluentDialog, FluentDataTable } from 'udp-react-enterprise-component-library';
+  ```
+
+2. **Modular Exports**: Each component is also available as a direct module import for optimal tree-shaking:
+  ```js
+  import { FluentButton } from 'udp-react-enterprise-component-library/UI/inputs/buttons';
+  import { FluentDialog } from 'udp-react-enterprise-component-library/UI/feedback';
+  import { FluentDataTable } from 'udp-react-enterprise-component-library/UI/dataDisplay/FluentDataTable';
+  ```
+
+### Export Map Generation
+
+During the build process the system performs a glob-based scan of the `src` tree and automatically generates an **export map** (`export-map.json`) that catalogs every component and its corresponding module path. The generator looks for `index.*` files (for example `index.ts` or `index.js`) inside child directories of `src` and treats each discovered index as an export entry. This means you can add a local `index.ts` file in a subfolder and it will be picked up and published automatically.
+
+Example:
+
+Project layout:
+
+```
+src/
+  UI/
+    inputs/
+      buttons/
+        index.ts    <-- exported as `UI/inputs/buttons`
+  utilities/
+    auth/
+      index.js      <-- exported as `utilities/auth`
+```
+
+Resulting `export-map.json` entries:
+
+```json
+{
+  "FluentButton": "UI/inputs/buttons",
+  "AuthProvider": "utilities/auth"
+}
+```
+
+This export map is the source of truth the plugin uses to rewrite barrel imports to modular imports during build.
+
+### Vite Plugin Integration
+
+The `udp-monorepo-plugin` reads the export map and automatically transforms barrel imports into modular imports during the build process. This transformation happens transparently, so developers can write convenient barrel imports while still achieving optimal bundle sizes.
+
+**Example Transformation:**
+```js
+// Developer writes:
+import { FluentButton, FluentDialog } from 'udp-react-enterprise-component-library';
+
+// Plugin transforms to:
+import { FluentButton } from 'udp-react-enterprise-component-library/UI/inputs/buttons';
+import { FluentDialog } from 'udp-react-enterprise-component-library/UI/feedback';
+```
+
+### Tree-Shaking Benefits
+
+This approach delivers the best of both worlds:
+- **Developer Experience**: Clean, simple imports during development
+- **Bundle Optimization**: Automatic tree-shaking eliminates unused components from production bundles
+- **Performance**: Reduced bundle sizes lead to faster load times and better user experience
+- **Maintainability**: Centralized export management without manual import path maintenance
+
+---
+
+## Code splitting & chunking
+
+This build system also enables effective code splitting so the bundler can place modules where they're needed instead of producing one large entry bundle.
+
+Key points:
+- Use dynamic `import()` (or framework-level lazy loading) to load routes/pages and large components on demand.
+- The `export-map.json` + `udp-monorepo-plugin` let you write convenient barrel imports while the plugin rewrites them to module-level imports. That makes it much easier for the bundler to identify module boundaries and emit smaller, more focused chunks.
+- Smaller chunks mean faster initial loads and better cache behavior: only code required for the first screen downloads immediately.
+
+Example (developer code):
+```js
+// route-level lazy loading keeps large pages out of the main bundle
+const SupportCaseListPage = React.lazy(() => import('udp-react-enterprise-component-library/SupportCaseList'));
+```
+
+What the bundler sees (after plugin transform):
+```js
+import SupportCaseList from 'udp-react-enterprise-component-library/UDP/SupportCaseList';
+// ...this allows Rollup/Vite to split `SupportCaseList` into its own chunk
+```
+
+
+
+## Getting Started
+
+### Installation
+
+To use the library in your project, install it via npm:
+
+```bash
+npm install udp-react-enterprise-component-library
+```
+
+### Basic Usage with `starter-client`
+
+While you can set up a project from scratch, we highly recommend using the **`starter-client`** application. This template comes pre-configured with the necessary providers, routing, and basic structure, allowing you to start building features immediately.
+
+The `starter-client` sets up the foundational structure for you, which looks like this:
+
+```jsx
+// Example of the setup in starter-client's App.js
+
+import React from 'react';
+import { Shell, ThemeProvider, AuthProvider } from 'udp-react-enterprise-component-library';
+import { BrowserRouter } from 'react-router-dom';
+import UdpRoutes from './routes/UdpRoutes'; // Your application's routes
+
+function App() {
+  return (
+    <BrowserRouter>
+      {/* AuthProvider handles MSAL authentication and provides user context */}
+      <AuthProvider>
+        {/* ThemeProvider applies the Fluent UI theme */}
+        <ThemeProvider>
+          {/* Shell is the main layout component for the entire application */}
+          <Shell siteName="My Application">
+            {/* UdpRoutes contains all your application's page routes */}
+            <UdpRoutes />
+          </Shell>
+        </ThemeProvider>
+      </AuthProvider>
+    </BrowserRouter>
+  );
+}
+
+export default App;
+```
+
+---
+
+## Data-Driven Pages & Containers
+
+This library excels at providing pre-built pages and containers that are deeply integrated with our API catalog, enabling rapid development of data-centric features.
+
+### `UdpDataBrowserPage`
+This is a powerful, generic page designed for browsing, filtering, and managing large datasets. It connects directly to an API endpoint defined in the API catalog.
+* **Functionality**: Provides a full-featured data grid experience with minimal configuration.
+* **Features**: Includes advanced search capabilities, column filtering, sorting, pagination, and the ability to perform actions (view, edit, delete) on individual rows.
+* **Use Case**: Ideal for any scenario where users need to view and interact with a list of business objects, such as a list of customers, orders, or assets.
+
+### `UdpMaintenanceEnginePage`
+This component provides a generic "maintenance" screen for performing CRUD (Create, Read, Update, Delete) operations on any entity defined in the API catalog.
+* **Functionality**: It dynamically generates a data grid and corresponding forms for editing, creating, and viewing records.
+* **Use Case**: Perfect for administrative back-office applications or any situation where users need to manage system data directly.
+
+### `InquiryContainer`
+The `InquiryContainer` is designed for building complex data exploration and investigation interfaces. It allows you to create screens where users can navigate through related data entities.
+* **Functionality**: It typically presents a master-detail or a tree-based layout. Users can select an item in a list or tree to see its detailed information and related child entities in a separate panel.
+* **Use Case**: Excellent for investigative analysis, such as exploring a customer's full history, including their orders, support tickets, and contact information, all in one connected view.
+
+### `WorkflowContainer`
+This container is designed to guide users through structured, multi-step business processes.
+* **Functionality**: Manages the state, progression, and UI for a series of defined steps or tasks. It can render different forms or components at each stage of the workflow and handle the logic for moving between steps.
+* **Use Case**: Ideal for processes like new user onboarding, multi-stage approval processes, or complex data entry tasks that need to be broken down into manageable parts.
+
+---
+
+## UI Component Reference
+
+The library provides a vast collection of components, categorized by function.
+
+### Layout & Structure
+
+Components for organizing page content and overall application layout.
+* **`Shell`**: The main application wrapper including header, sidebar, and content area.
+* **`Page`, `PageContainer`, `PageContent`**: Components for structuring the content of a page.
+* **`PageHeader`, `PageSectionHeader`**: Headers for pages and sections within a page.
+* **`GridGroup`, `GridRow`, `GridUnit`**: A set of components for creating flexible grid layouts.
+* **`HeaderLayout`, `SideBarTemplate`, `DraggableSidebarTemplate`**: Pre-defined page layouts.
+* **`SplitScreen`**: Creates a resizable split-screen view.
+
+### Navigation
+
+Components for user navigation and flow control.
+* **`NavigationSidebar`, `MiniCollapsibleSidebar`**: The primary application navigation menus.
+* **`UdpTabs`, `FluentSimpleTabs`**: Tab components for organizing content.
+* **`BreadCrumbMenu`**: A breadcrumb component for showing navigation hierarchy.
+* **`AmbientStepper`**: A stepper component to guide users through a sequence of steps.
+* **`AppMenu`, `AppMenuItem`**: Components for building in-app menus.
+* **`BaseTreeMenu`**: A component for creating hierarchical tree menus.
+
+### Buttons
+
+A wide variety of buttons for different user actions and contexts.
+* **`FluentButton`, `FluentCompoundButton`, `FluentIconButton`**: Standard, compound, and icon-only buttons based on Fluent UI.
+* **`IconButtonWithToolTip`**: An icon button that includes a tooltip on hover.
+* **`ActionSpeedDial`**: A floating action button that expands to show more actions.
+* **`AmbientTokenButton`, `AmbientChipButton`, `AmbientCardButton`**: Stylized buttons for specific use cases.
+* **`ToolBarButton`**: Buttons designed for use in toolbars.
+* **`AdvanceButton`**: A button for progressing in a workflow or stepper.
+
+### Forms & Inputs
+
+A comprehensive suite of form controls, primarily designed to work with `react-final-form`.
+
+#### Text & Numeric
+* **`FluentTextField`, `AmbientTextField`**: General-purpose text input fields.
+* **`FluentSearchField`**: A text field specifically styled for search inputs.
+* **`FluentTagField`**: An input for entering and displaying tags.
+* **`KeyValueTextField`**: A specialized field for entering key-value pairs.
+
+#### Selection Controls
+* **`FluentSelectMenu`, `FluentSimpleSelect`**: Dropdown select menus.
+* **`FluentCheckbox`**: A standard checkbox.
+* **`FluentRadioGroup`, `FluentRadio`**: Radio buttons for single selection from a list.
+* **`FluentToggle`**: An on/off switch.
+* **`AmbientToggleButton`, `AmbientToggleButtonGroup`**: A group of toggle buttons.
+* **`FluentScrollLoadAutocompleteMenu`, `AmbientAutoComplete`**: Autocomplete inputs that can load data on scroll.
+
+#### Date & Time Pickers
+* **`FluentDatePicker`, `FluentDateTimePicker`, `FluentTimePicker`**: Controls for selecting dates and times.
+* **`UdpDateSelector`, `UdpTimeSelector`**: Alternative date and time selectors.
+* **`AmbientDateRangeSelector`**: A specialized control for selecting a date range.
+
+#### Specialized Inputs
+* **`FileImportMappingWizard`**: A full wizard component for guiding users through a file import and data mapping process.
+* **`FieldArrayCard`**: A card component for managing a dynamic array of fields in a form.
+* **`CkRichEditor`**: A rich text editor for formatted text input.
+* **`FileUpload`, `DragDropFileUpload`**: Components for file uploads.
+* **`FluentColorPicker`**: A control for selecting a color.
+
+### Data Display
+
+Components for presenting information to the user in various formats.
+
+#### Cards
+* **`AmbientCard`, `FluentCard`**: General-purpose container cards.
+* **`WidgetCard`, `InfoCard`, `QuickViewCard`**: Specialized cards for dashboards and quick information display.
+* **`NewsCard`, `BioCard`, `WorkOrderCard`**: Cards designed for specific types of content.
+* **`AmbientVisualizationCard`**: A card specifically for holding charts and other visualizations.
+
+#### Lists
+* **`AmbientList`, `CompactDataList`**: Flexible list components.
+* **`FluentListElement`, `FluentListItem`**: Components for building custom lists.
+* **`Directory`, `AddressListItem`**: Specialized list formats for directories and addresses.
+* **`CardList`**: A component that renders a list of items as cards.
+
+#### Grids & Tables
+* **`AmbientGridTemplate`, `UdpGridTemplate`**: High-level, feature-rich AG Grid templates.
+* **`ServerSideUdpGrid`, `ClientSideUdpGrid`, `ApiMethodUdpGrid`**: Grid implementations for different data fetching strategies.
+* **`FluentDataTable`**: A simpler, lighter table component.
+* **`NestedGrid`**: A grid that supports expandable rows to show nested child grids.
+
+#### Headers
+* **`PrimaryActionHeader`**: A prominent header with a title and primary action buttons, often used with grids.
+* **`EntityHeader`**: A detailed header for displaying key information about a single data entity.
+* **`SideSheetHeader`**: A standardized header for use in side sheets.
+
+#### Chips, Badges & Tags
+* **`StatusChip`**: A chip designed to display a status (e.g., "Active", "Pending").
+* **`AggregateChip`**: A chip used to display an aggregated value.
+* **`IndicatorChip`**: A general-purpose indicator chip.
+
+#### Timelines
+* **`UdpTimeline`, `FluentTimeline`**: Components for displaying a sequence of events over time.
+* **`MttMainTimeline`**: A multi-threaded timeline for visualizing parallel event streams.
+* **`TimelineCalendar`**: A component that combines a calendar view with a timeline.
+
+### Feedback & Loading
+
+Components for communicating state and progress to the user.
+* **`FluentDialog`**: A modal dialog for important messages or actions.
+* **`AmbientAlert`, `UdpAlert`**: Alert components for displaying messages (success, error, info, warning).
+* **`SideSheet`**: A panel that slides in from the side of the screen, often used for editing or detail views.
+* **`AmbientToast`**: A non-intrusive notification that appears briefly.
+* **`PageLoading`, `LoadingOverlay`, `LoadingIndicator`**: Various styles of loading indicators.
+* **`LinearProgress`, `CircularProgress`**: Progress bars.
+
+### Charts & Visualization
+
+A rich set of components for visualizing data.
+* **`UdpBarChart`, `UdpDonutChart`, `UdpLineChart`, `UdpDistributionChart`**: Standard chart types.
+* **`AmSankeyChart`**: A Sankey diagram for visualizing flows.
+* **`GaugeGraph`, `CircleGaugeWidget`**: Gauge components for displaying a value within a range.
+* **`SparklineWidget`**: A small, inline chart showing a trend.
+
+### Maps
+
+Components for displaying and interacting with geographical data.
+* **`UdpMap`, `FluentMap`, `GeoMap`**: Core map components.
+* **`MapLayout`**: A template for creating complex map-based interfaces with sidebars, toolbars, and popovers.
+* **`UdpMapToolbar`**: A toolbar with common map controls.
+
+### Actions & Workflows
+
+Components related to triggering and managing application actions.
+* **`ActionWrapper`**: A generic wrapper for actions that handles different display modes (modal, side sheet).
+* **`ActionModal`, `ActionSideSheet`**: Components that host action forms in a modal or side sheet.
+* **`ActionForm`**: A standardized form for actions.
+* **`WorkflowContainer`, `WorkflowContent`**: Components for managing multi-step workflows.
+
+### Utility & Miscellaneous
+
+A collection of other useful components and utilities.
+* **`UnityIcon`, `FluentIcon`, `UnityFluentIcon`**: Components for rendering icons from our icon library.
+* **`UserAvatar`**: Displays a user's avatar or initials.
+* **`DiffChecker`**: A component to show the differences between two sets of data.
+* **`Iframe`**: A component for embedding external content.
+* **`FileViewer`, `PDFViewer`, `ImageViewerSideSheet`**: Components for viewing different file types.
+
+