mpa-common-components-fe

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

Installation

npm install mpa-common-components-fe

Usage

Header Component

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

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

function App() {
  const [selectedDeviceId, setSelectedDeviceId] = useState('device1');
  
  const handleDeviceChange = (deviceId: string) => {
    setSelectedDeviceId(deviceId);
  };

  return (
    <Header
      selectedDeviceId={selectedDeviceId}
      onDeviceChange={handleDeviceChange}
      isVisibleDeviceSelector={true}
      rightComponents={<div>Custom right content</div>}
      leftComponents={<div>Custom left content</div>}
    />
  );
}

DeviceManagement Component

A comprehensive device management dashboard with tabs, sync settings, and history management.

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 (
    <DeviceManagement
      selectedDeviceId={selectedDeviceId}
      onDeviceChange={handleDeviceChange}
      devices={devices}
    />
  );
}

DeviceManagement Props

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

DeviceManagement Features

• 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

Header Props

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

Utility Functions

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

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

# Install dependencies
npm install

# Start development server
npm run dev

# Build for production
npm run build

# Build library for npm
npm run build:lib

# Lint code
npm run lint

License

MIT