udp-react-enterprise-component-library 1.0.0

package/README.md

@@ -0,0 +1,240 @@
+# `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.
+
+---
+
+## 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.
+
+

package/dist/AGLicense.d.ts

@@ -0,0 +1 @@
+export const LicenseKey: "Using_this_{AG_Grid}_Enterprise_key_{AG-060880}_in_excess_of_the_licence_granted_is_not_permitted___Please_report_misuse_to_legal@ag-grid.com___For_help_with_changing_this_key_please_contact_info@ag-grid.com___{Univerus_Software_Inc}_is_granted_a_{Single_Application}_Developer_License_for_the_application_{MAIS_eRec}_only_for_{1}_Front-End_JavaScript_developer___All_Front-End_JavaScript_developers_working_on_{MAIS_eRec}_need_to_be_licensed___{MAIS_eRec}_has_not_been_granted_a_Deployment_License_Add-on___This_key_works_with_{AG_Grid}_Enterprise_versions_released_before_{28_June_2025}____[v3]_[01]_MTc1MTA2NTIwMDAwMA==17ac166e7bb5dcca7f3eaa21c79da63b";