Skip to main content

​
Overview

Dynamic UI is built on a robust micro frontend architecture designed specifically for financial applications. The library provides a modular, context-driven system that enables seamless integration across distributed applications while maintaining consistency and performance.

​
Core Architecture Patterns

​
Context-Based Configuration

Dynamic UI uses React Context to provide centralized configuration across all components in your application. The architecture is built around two primary contexts:

​
DContext Provider

The DContext serves as the main configuration hub for the entire component library:
src/contexts/DContext.tsx
import { DContextProvider } from '@dynamic-framework/ui-react';

function App() {
  return (
    <DContextProvider
      language="en"
      currency={{
        symbol: '$',
        precision: 2,
        separator: ',',
        decimal: '.'
      }}
      icon={{
        familyClass: 'bi',
        familyPrefix: 'bi-',
        materialStyle: false
      }}
      portalName="d-portal"
    >
      {/* Your app components */}
    </DContextProvider>
  );
}
The context provider automatically reads CSS variables for responsive breakpoints using the getCssVariable utility, syncing your JavaScript logic with SCSS design tokens.
Key Configuration Options:
  • language: Internationalization locale (default: 'en')
  • currency: Financial formatting configuration with symbol, precision, and separators
  • icon: Icon library integration settings (supports Bootstrap Icons, Lucide, etc.)
  • breakpoints: Responsive breakpoints automatically synced from CSS variables
  • portalName: Portal container identifier for modals and overlays

​
Portal Architecture

The DPortalContext manages modal layers, overlays, and floating UI elements using a stack-based architecture:
src/contexts/DPortalContext.tsx
const { openPortal, closePortal } = useDPortalContext();

// Open a modal with payload
openPortal('userProfile', { userId: '123' });

// Close the top-most portal
closePortal();
Portal Features:
  • Stack-based layer management for nested modals
  • Automatic body scroll locking when portals are active
  • Keyboard trap for accessibility (Tab cycling within active portal)
  • Backdrop click handling with configurable dismissal
  • Framer Motion animations for smooth transitions

​
Hook-Based Utilities

Dynamic UI provides specialized hooks for common patterns:

usePortal

Creates and manages DOM portal containers dynamically

useStackState

Manages stack-based state for portal layers

useMediaBreakpointUp

Responsive utilities matching SCSS breakpoint system

useDisableBodyScrollEffect

Prevents body scroll when overlays are active

​
Component Structure

All components follow a consistent architecture pattern:

​
File Organization

src/components/
├── DButton/
│   ├── DButton.tsx          # Main component implementation
│   ├── DButton.spec.tsx     # Unit tests
│   └── index.ts             # Public exports
├── DModal/
│   ├── DModal.tsx
│   ├── components/          # Sub-components
│   │   ├── DModalHeader.tsx
│   │   ├── DModalBody.tsx
│   │   └── DModalFooter.tsx
│   ├── DModal.spec.tsx
│   └── index.ts

​
Component Props Pattern

Components extend standard HTML attributes while adding custom functionality: 
interface Props
  extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'color'>,
  BaseProps,
  StartIconProps,
  EndIconProps {
  color?: ComponentColor;
  size?: ComponentSize;
  variant?: ButtonVariant;
  loading?: boolean;
  loadingAriaLabel?: string;
}
This pattern ensures:
  • Full TypeScript type safety
  • Native HTML attribute support
  • Consistent prop interfaces across components
  • Extensibility for custom implementations

​
Micro Frontend Integration

​
Independent Deployment

Dynamic UI is designed for micro frontend architectures where different teams manage separate applications:
1

Install via NPM

Each micro frontend installs the library independently:
npm install @dynamic-framework/ui-react
2

Wrap with Context

Configure the library for your specific micro frontend:
<DContextProvider
  language={currentLocale}
  currency={regionalSettings}
>
  <YourMicroFrontend />
</DContextProvider>
3

Share Design Tokens

Import shared SCSS variables across micro frontends:
@import '@dynamic-framework/ui-react/dist/css/dynamic-ui';

​
Portal Communication

For cross-micro-frontend communication, use the portal system: 
// Define available portals with TypeScript
type AvailablePortals = {
  checkout: { amount: number; items: string[] };
  userProfile: { userId: string };
};

<DContextProvider<AvailablePortals>
  availablePortals={{
    checkout: CheckoutModal,
    userProfile: UserProfileModal,
  }}
  portalName="app-portal"
>
  {/* App content */}
</DContextProvider>

​
Bootstrap Foundation

Dynamic UI is built on top of Bootstrap 5.3.8, extending its capabilities for financial applications:
  • CSS Variable System: All components use CSS custom properties (src/style/root/_root.scss:355)
  • Utility Classes: Bootstrap utilities enhanced with financial-specific helpers
  • Grid System: Responsive layout system with configurable breakpoints
  • Component Prefix: Uses bs- prefix for Bootstrap compatibility (src/components/config.ts:1)

​
State Management

Components manage internal state using React hooks while exposing controlled and uncontrolled modes: 
// Uncontrolled - component manages state
<DInputSwitch id="terms" />

// Controlled - parent manages state
<DInputSwitch 
  id="terms" 
  checked={termsAccepted}
  onChange={setTermsAccepted}
/>

​
Performance Considerations

The library is built with Rollup to support tree shaking. Import only the components you need:
import { DButton, DModal } from '@dynamic-framework/ui-react';
SCSS is compiled separately, allowing you to:
  • Import only required component styles
  • Override variables before compilation
  • Use PostCSS for autoprefixing and minification
Portal components can be lazy loaded:
const CheckoutModal = lazy(() => import('./CheckoutModal'));

​
Next Steps

Theming System

Learn how to customize colors, typography, and design tokens

Accessibility

Understand built-in accessibility features and WCAG compliance

Build docs developers (and LLMs) love

Get started for freeTalk to us