Xelcode Library

A comprehensive React component library and utility toolkit for building enterprise applications with Material-UI integration.

📦 Installation

npm install xelcode-library
# or
yarn add xelcode-library

🔗 Development Setup

For development and testing, you can use yarn link:

# In the xelcode-library directory
yarn link

# In your project directory
yarn link xelcode-library

🏗️ Project Structure

src/
├── components/          # React components
├── store/              # Redux store with sagas
└── utils/              # Utility functions and helpers

🧩 Components

Core Components

• Button: Enhanced Material-UI Button with additional styling and icon support
• Dialog: Modal dialog component with built-in audio feedback and type-based styling
• TextField: Enhanced text input with scanning support and custom adornments
• List & SimpleList: Advanced list components with search, sorting, and swipe functionality
• DatePicker: Date selection component with Material-UI Pickers integration
• Select & SelectDialog: Dropdown selection components with keyboard navigation support

Additional Components

• ButtonGroup: Arrange buttons in a grid layout
• ErrorBoundary: React error boundary with fallback UI
• HelperText: Information text with icons
• Label & LabelAligned: Text display components
• Loading: Loading overlay with timeout support
• RadioButtonGroup: Radio button selection group
• ScannerService: Barcode scanner integration service

🗄️ Store & State Management

The library includes a complete Redux store setup with Redux-Saga for side effects.

Store Modules

• API: API request state management
• Common: Shared application state
• Scanner: Barcode scanner state
• User: User authentication and session management

Usage

import { libraryActions, librarySaga } from 'xelcode-library/store';

// Dispatch actions
dispatch(libraryActions.getConfig());
dispatch(libraryActions.getPrinters());

// Access selectors
import { selectCommon, selectUser } from 'xelcode-library/store';
const common = useSelector(selectCommon());
const user = useSelector(selectUser());

🛠️ Utilities

API Management

import { ApiManager } from 'xelcode-library/utils';

// Initialize API manager
ApiManager.setStore(store);
ApiManager.setSession(sessionId);

// Make API calls
const result = await ApiManager.post('endpoint', data);

JDE Utilities

import { JdeUtils, Config } from 'xelcode-library/utils';

// Format lot numbers
const formatted = JdeUtils.formatLotLots(item, lotn, lots, branch);

// Get configuration
const value = Config.get('key');

Available JdeUtils Functions

• consignmentFlag(branch): Check if branch is consignment
• formatLotLots(item, lotn, lots, branch): Format item with lotn and lots information
• trim(text, length): Trim text to specified length
• getPrinter(processId, printers): Get appropriate printer for processId
• isValidTime(time): Validate time format
• parseOrderNumber(order, withCompany): Parse order number into components
• toDouble(text, numberOfDigit): Convert text to double with numberOfDigit decimal places
• toBool(text): Convert text to boolean
• formatQuantity(quantity, um): Format quantity with unit of measure um
• formatDate(date): Format date to YYYYMMDD string
• formatOrder(...args): Join args order arguments
• formatTime(hhmm): Format hhmm time to HH:MM
• toPrimaryUM(item, quantity, fromUM): Convert quantity from fromUM to primary unit
• convertUM(quantity, item, umCode): Convert quantity between units using umCode
• getUMFactor(item, umCode): Get unit of measure conversion factor for umCode
• convertToStruct(quantity, item, structId): Convert quantity to structural unit structId
• convertFromStruct(quantity, item, structId): Convert quantity from structural unit structId
• getUom1(item): Get primary unit of measure from item
• getStructUM(item, structId): Get structural unit of measure for structId
• compareItemsMask(item1, scan): Compare item1 with scan using mask
• compareItems(item1, scan): Compare item1 with scan for equality
• compareItem(item, itemCode): Compare item with itemCode
• locationFormat(location, addRemainingSeparators): Format location string
• locationDeformat(location): Remove formatting from location
• filter(textfieldValue, value): Filter value based on textfieldValue input
• parseToHHMM(time): Parse time to HH:MM format
• parseMicrosoftDate(date): Parse Microsoft date format

🔧 Configuration

Environment Variables

API_BASE_URL=https://api.example.com
TIMEOUT=364000

📋 Requirements

• Node.js >= 10
• React >= 17.0.2
• React DOM >= 17.0.2
• Material-UI >= 4.12.3

🚀 Development

Build

npm run build
# or
yarn build

Built with ❤️ by the Xelcode team