lmerza-accounts-ui/README.md

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

# 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

```bash
npm install lmerza-accounts-ui
```

## Quick Start

### 1. Include in Your Server Application

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

### 2. Include in Your Application

```html
<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

```html
<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

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

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

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

## Development

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

Built with [vite-plugin-react-strangler](https://github.com/ljmerza/vite-plugin-react-strangler).

## License

MIT