lmerza-accounts-ui

Accounts UI component library with React Strangler integration for legacy frontend modernization.

A collection of React components designed for account management interfaces, built specifically for the Strangler Fig pattern to gradually modernize legacy server-side applications.

Installation

npm install lmerza-accounts-ui

Quick Start

1. Include in Your Server Application

# The discovery system and components are automatically available
# Just reference the npm package in your server's static serving

2. Include in Your Application

<script type="module" src="node_modules/lmerza-accounts-ui/dist/discover.js"></script>
<hello-widget name="World"></hello-widget>

Available Components

| Component | Description | Usage | |-----------|-------------|-------| | card-widget | Composable card container | <card-widget variant="primary"> | | cardheader-widget | Card header with title/subtitle | <cardheader-widget title="Title" subtitle="Subtitle"> | | cardbody-widget | Card content area | <cardbody-widget padding="true"> | | cardfooter-widget | Card footer with alignment | <cardfooter-widget align="right"> | | hello-widget | Simple greeting component | <hello-widget name="World"> | | data-table | Advanced data table | <data-table sortable="true" data="..."> |

Usage

<script type="module" src="node_modules/lmerza-accounts-ui/dist/discover.js"></script>

<!-- Components load automatically -->
<hello-widget name="World"></hello-widget>

<card-widget variant="primary">
  <cardheader-widget title="User Profile"></cardheader-widget>
  <cardbody-widget padding="true">
    <p>Account information here</p>
  </cardbody-widget>
</card-widget>

Browser API

// List available components
window.componentDiscovery.listAvailable()

// Get loading stats
window.componentDiscovery.getStats()

// Load specific component
await window.componentDiscovery.loadComponent('hello-widget')

Development

npm run dev        # Development server
npm run build      # Build library
npm run storybook  # Component documentation

Built with vite-plugin-react-strangler.

License

MIT