Common frontend components for MPA applications
npm install mpa-common-components-feA React component library providing common frontend components for MPA (Multi-Page Application) applications.
``bash`
npm install mpa-common-components-fe
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 (
onDeviceChange={handleDeviceChange}
isVisibleDeviceSelector={true}
rightComponents={
$3
A comprehensive device management dashboard with tabs, sync settings, and history management.
`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
npm installStart development server
npm run devBuild for production
npm run buildBuild library for npm
npm run build:libLint code
npm run lint
``MIT