PassportX Portal UI Components

Component library for PassportX BackOffice applications built with React, TypeScript, and Vite.

Installation

```bash npm install @amateescu/portal-ui-components ```

Peer Dependencies

```json { "react": ">=18.2.0", "react-dom": ">=18.2.0", "i18next": ">=23.10.1", "react-i18next": ">=14.1.0", "@mui/material": ">=6.4.11" } ```

Usage

Importing Components

```typescript import { PassportButton, KpiCard, Login } from '@amateescu/portal-ui-components/components'; import { currency, date, decimal } from '@amateescu/portal-ui-components/portal-utils'; import type { Column, CultureStore } from '@amateescu/portal-ui-components/types'; ```

Basic Example

```tsx import { PassportButton } from '@amateescu/portal-ui-components/components';

function App() { return ( <PassportButton content="Click me" onClick={() => console.log('Clicked!')} /> ); } ```

Components

PassportButton

A styled Material-UI button with project-specific defaults.

KpiCard

Display key performance indicators with icons.

Login

Authentication form with username/password fields.

TotalDataGrid

Customized Material-UI DataGrid with totals row.

[Full component documentation available in Storybook]

Development

```bash

Install dependencies

npm install

Start Storybook

npm run storybook

Run tests

npm test

Build library

npm run build ```

License

Private

Contributing

[Internal guidelines] ```

Component Documentation Template

Each component should have inline JSDoc:

/**
 * KpiCard displays a key performance indicator with an icon and title.
 * 
 * @example
 * ```tsx
 * <KpiCard
 *   title="Total Sales"
 *   content="$1,234,567"
 *   icon={<DollarIcon />}
 *   menuCollapsed={false}
 * />
 * ```
 * 
 * @param {KpiCardProps} props - Component props
 * @returns {JSX.Element} Rendered KPI card
 */
export function KpiCard({ title, content, icon, menuCollapsed }: KpiCardProps) {
  // ...
}