EPAM UUI

The @epam/uui-core package provides the foundational building blocks for the EPAM UUI library. It is designed to enable interoperability between different UUI packages and provides essential logic for application development.

Key capabilities include:

• Interoperability: TypeScript interfaces that allow various UUI packages to work together seamlessly.
• Services: Core logic for API calls, error handling, modal management, and notifications.
• State Management: Primitives for managing Forms, validation logic, and Data Sources.
• Hooks: Specialized React hooks such as useForm, useTableState, and useVirtualList.
• Utilities: Various helper functions for common development tasks.

The UUI Timeline package is a specialized module within the EPAM UUI library designed for building Gantt-chart-like interfaces. It combines high-performance rendering with ease of development by using a hybrid approach: Canvas is utilized for high-speed rendering of timeline elements, while DOM elements can be used to simplify the development of user interactions.

Key capabilities include:

• Time-based Coordinate Computation: Helpers to calculate coordinates for timeline objects based on time.
• Smooth Transitions: Support for smooth transitions between different positions and scales.
• Hybrid Rendering: Mixed canvas-based and DOM-element rendering for a balance of performance and interactivity.
• Core Components: Includes a basic timeline bar component, as well as timeline scale, grid, and navigation components to create a fully interactive timeline canvas.

The @epam/assets package is a specialized module within the EPAM UUI library that provides the visual and stylistic foundation for UUI applications. It contains the following assets:

• Icon set: A collection of standardized icons used across UUI components.
• Themes and fonts: Pre-defined visual themes and associated typography settings.
• SCSS folder: Legacy helpers and mixins maintained for backward compatibility with older UUI implementations.

The @epam/uui-test-utils package provides a collection of helper functions designed to simplify the creation of unit tests for UUI components. It is intended to be used alongside your testing framework (such as Jest or Vitest) to handle the specific requirements of testing UUI-based UI elements.

For detailed guidance on recommended testing strategies and approaches within the UUI ecosystem, refer to the official UUI testing documentation.

The @epam/uui-docs package provides a suite of helpers designed specifically for documenting UUI libraries. It allows you to generate in-code documentation for React Component props and provides utilities for creating rich, interactive documentation environments.

Key capabilities include:

• DocBuilder: A tool to build in-code documentation specifically for React Component props.
• Demo API & Demo Data: Utilities to provide realistic example property values for your documentation.
• Sandbox Data Domain: TypeScript interfaces that provide structured data for documentation sandboxes.
• Property Editors: Specialized UI editors for component properties, such as color pickers, to enhance the documentation experience.

The @epam/uui-components package provides a set of base, unstyled components designed to serve as a foundation for building custom, brand-specific component libraries.

Key characteristics:

• Unstyled: Components do not come with pre-defined visual styles.
• CSS Marker Classes: Every component includes specific CSS marker classes. This allows you to apply your own branding and styles directly via these classes without having to override complex base styles or use high-specificity selectors.

The @epam/uui-editor provides several built-in capabilities for rich text editing:

• Basic Markup: Support for headers, bold, italic, and other standard text styles.
• Media & Files: Embedding and resizing images, as well as embedding video, files, and PDFs.
• Advanced Layouts: A full-featured tables plugin and additional markup blocks like quotes and notes.
• UX Patterns: Modern floating panels for in-line usage, allowing for seamless transitions from view to edit modes.
• Extensibility: The editor can be extended with custom components.