@mutuamad-motor-network/ui-lab

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

🚀 Installation

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

📋 Prerequisites

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

🎯 Basic Usage

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 (
    <ThemeProvider theme={aurgiTheme}>
      <LoadingPageSkeleton />
      <AppliedFilters filtersApplied={[{ label: 'Estado', value: 'Activo' }]} />
    </ThemeProvider>
  );
}

🎨 Multi-Brand Theming

Choose from three built-in themes:

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
<ThemeProvider theme={motorTownTheme}>
  <YourApp />
</ThemeProvider>;

📦 Available Components

Dialog Components (7)

• 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

Button Components (3)

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

Form & Input Components (3)

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

List & Data Components (4)

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

Card & Display Components (6)

• 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

Image & Media Components (4)

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

Step & Workflow Components (2)

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

Utility & Feedback Components (2)

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

🔧 TypeScript Support

Full TypeScript support with exported interfaces:

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

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

📖 Advanced Usage

Theme Customization

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',
    },
  },
});

Component Composition

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

function CustomDialog({ open, onClose }) {
  return (
    <BaseDialog open={open} onClose={onClose}>
      <BaseDialog.Header title="Custom Dialog" />
      <BaseDialog.Content>
        <InfoCard>
          <InfoCard.Header title="Information" />
          <InfoCard.Content>Your custom content here</InfoCard.Content>
        </InfoCard>
      </BaseDialog.Content>
      <BaseDialog.Actions>
        <Button onClick={onClose}>Close</Button>
      </BaseDialog.Actions>
    </BaseDialog>
  );
}

🏗️ Requirements

Peer Dependencies

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

Optional Dependencies

• 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