mpa-common-components-fe

A React component library providing common frontend components for MPA (Multi-Page Application) applications.

Installation

``bash
npm install mpa-common-components-fe
`

Usage

$3

The main component is the Header which provides a complete header with device selector, notifications, brand links, and personal dropdown.

`tsx
import { Header } from 'mpa-common-components-fe';

function App() {
const [selectedDeviceId, setSelectedDeviceId] = useState('device1');

const handleDeviceChange = (deviceId: string) => {
setSelectedDeviceId(deviceId);
};

return (
selectedDeviceId={selectedDeviceId}
onDeviceChange={handleDeviceChange}
isVisibleDeviceSelector={true}
rightComponents={

`tsx
import { DeviceManagement } from 'mpa-common-components-fe';

function App() {
const [selectedDeviceId, setSelectedDeviceId] = useState('device1');

const devices = [
{ id: 'device1', name: 'SM-A528B' },
{ id: 'device2', name: 'iPhone 14' },
{ id: 'device3', name: 'Samsung Galaxy' }
];

const handleDeviceChange = (deviceId: string) => {
setSelectedDeviceId(deviceId);
};

return (
selectedDeviceId={selectedDeviceId}
onDeviceChange={handleDeviceChange}
devices={devices}
/>
);
}
`

$3

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| selectedDeviceId | string | Yes | The currently selected device ID |
| onDeviceChange | (deviceId: string) => void | Yes | Callback when device selection changes |
| devices | Array<{id: string, name: string}> | No | Array of available devices |

$3

- Top Bar: Shows expiry date and device selector
- Tab Navigation: 6 tabs with numbered badges (1-3)
- Sync Settings (active by default)
- Device Information
- Check Connection (Beta)
- Export Data
- Uninstall
- Remove Device
- Sync Status: Shows last sync time and next sync status
- History Management: GPS, SMS, and Call history with checkboxes and clear buttons

$3

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| selectedDeviceId | string | Yes | The currently selected device ID |
| onDeviceChange | (deviceId: string) => void | Yes | Callback when device selection changes |
| isVisibleDeviceSelector | boolean | Yes | Whether to show the device selector |
| rightComponents | React.ReactNode | No | Custom components to render on the right side |
| leftComponents | React.ReactNode | No | Custom components to render on the left side |

$3

The package also exports utility functions for working with brand links and subdomains:

`tsx
import {
getCapitalizedSubdomainFromUrl,
getSubdomainFromUrl,
capitalizeFirstLetter,
findCurrentBrandLink
} from 'mpa-common-components-fe';

// Get the capitalized subdomain from current URL
const subdomain = getCapitalizedSubdomainFromUrl(); // e.g., "Contact" from "contact.myphones.app"

// Get the raw subdomain
const rawSubdomain = getSubdomainFromUrl(); // e.g., "contact"

// Capitalize first letter of a string
const capitalized = capitalizeFirstLetter('hello'); // "Hello"

// Find current brand link from array of brand links
const currentBrandId = findCurrentBrandLink(brandLinks, window.location.href);
`

Dependencies

This package has the following peer dependencies:

- react (^18.0.0 || ^19.0.0)
- react-dom (^18.0.0 || ^19.0.0)

And the following dependencies:

- @jframework/jfw-js (^5.1.3)
- @tanstack/react-query (^5.83.0)
- 1byte-react-design (^1.5.11-1)
- antd (^5.26.6)
- react-cookie (^8.0.1)

Development

`bash


Install dependencies

License

MIT