@mutuamad-motor-network/ui-lab

Multi-brand component library for the MUTUAMAD MOTOR NETWORK ecosystem, supporting Aurgi, MotorTown, and Neutral themes.

🚀 Installation

``bash
npm install @mutuamad-motor-network/ui-lab
`

📋 Prerequisites

- React >= 17.0.0
- Material-UI >= 6.0.0
- TypeScript >= 4.5.0 (recommended)

🎯 Basic Usage

`tsx
import { AppliedFilters, LoadingPageSkeleton } from '@mutuamad-motor-network/ui-lab';
import { aurgiTheme } from '@mutuamad-motor-network/ui-lab/themes';
import { ThemeProvider } from '@mui/material/styles';

function App() {
return (




);
}
`

🎨 Multi-Brand Theming

Choose from three built-in themes:

`tsx
import {
aurgiTheme, // Aurgi brand theme
motorTownTheme, // MotorTown brand theme
neutralTheme, // Default neutral theme
} from '@mutuamad-motor-network/ui-lab/themes';

// Use any theme with ThemeProvider


;
`

📦 Available Components

$3

- ApiKeyDialog - API key management dialog
- BaseDialog - Flexible base dialog component
- ConfirmationDialog - Confirmation prompt dialog
- ImagesUploadDialog - Multiple image upload dialog
- NotFoundModal - 404 not found modal
- ReplaceImageDialog - Image replacement dialog
- ScanQRDialog - QR code scanner dialog

$3

- BackButton - Navigation back button
- ButtonLoader - Button with loading state
- FileUploadButton - File upload with validation

$3

- AdvanceFilters - Advanced filtering interface
- FormikField - Formik-integrated form field
- FieldDisplay - Read-only field display

$3

- AppliedFilters - Display applied filter chips
- CheckList - Interactive checklist
- Pagination - Data pagination controls
- CheckImageStep - Image verification step

$3

- InfoCard - Information display card
- SupplyOrderCard - Supply order information card
- SupplyOrderSummary - Order summary display
- ErrorCard - Error state card
- NoResultsCard - Empty state card
- ImageCard - Image display card

$3

- ImageGallery - Image gallery component
- ImageDialog - Image display dialog
- SelectImageStep - Image selection interface

$3

- InstallPrompt - App installation prompt
- PendingImagesAlert - Pending images notification

$3

- Loader - Loading spinner with backdrop options
- LoadingPageSkeleton - Full page loading skeleton

🔧 TypeScript Support

Full TypeScript support with exported interfaces:

`tsx
import type {
AppliedFilterItem,
ButtonLoaderProps,
InfoCardProps,
} from '@mutuamad-motor-network/ui-lab';

const filters: AppliedFilterItem[] = [{ label: 'Estado', value: 'Activo' }];
`

📖 Advanced Usage

$3

`tsx
import { createTheme } from '@mui/material/styles';
import { aurgiTheme } from '@mutuamad-motor-network/ui-lab/themes';

const customTheme = createTheme({
...aurgiTheme,
palette: {
...aurgiTheme.palette,
primary: {
main: '#your-color',
},
},
});
`

$3

`tsx
import { BaseDialog, InfoCard } from '@mutuamad-motor-network/ui-lab';

function CustomDialog({ open, onClose }) {
return (





Your custom content here



Close


);
}
`

🏗️ Requirements

$3

`json
{
"react": ">=17.0.0",
"react-dom": ">=17.0.0",
"@mui/material": ">=6.0.0",
"@emotion/react": ">=11.0.0",
"@emotion/styled": ">=11.0.0"
}
`

$3

- formik` - Required only if using FormikField component

📚 Documentation & Examples

For interactive examples and detailed documentation, visit our Storybook.

🔄 Version Compatibility

| Library Version | React | Material-UI | Notes |
| --------------- | ----- | ----------- | -------------------- |
| 1.x.x | 17+ | 6+ | Current stable |
| 2.x.x | 18+ | 6+ | Next major (planned) |

📄 License

This package is proprietary software of MUTUAMAD MOTOR NETWORK S.L.U.
All rights reserved © 2025.

🐛 Issues & Support

This library is maintained by the MUTUAMAD MOTOR NETWORK development team.

- Repository: https://github.com/mutuamad-motor-network/mmn-ui-lab
- Issues: https://github.com/mutuamad-motor-network/mmn-ui-lab/issues