@erplora/erx

v0.0.2

Published

8 days ago

ERPlora eXtensions - Web Components library for ERP desktop/web

0High
0Medium
0Low

ioanbeilic

web-components stencil components ui erp pos enterprise ionic

ERX - ERPlora eXtensions

ERX is a comprehensive Web Components library built with Stencil.js, designed to complement Ionic Framework for enterprise ERP desktop/web applications. It provides 94 specialized components not available in Ionic, while using Ionic's design system for perfect integration.

✨ Features

94 Enterprise Components - POS, HR, Manufacturing, Data Grids, Scheduling, and more
🎨 Ionic Design System - Components inherit Ionic's look and feel automatically
✨ iOS 26 Liquid Glass - Glassmorphism effect with .liquid-glass class
📱 Bootstrap Grid - Responsive grid system with Ionic spacing
🌓 iOS & Android Modes - Platform-specific styling (rounded vs sharp corners, shadows, etc.)
🌙 Dark Mode Support - Follows Ionic's dark theme automatically
Framework Agnostic - Works with React, Vue, Angular, or vanilla JS
TypeScript - Full type definitions included
Accessible - WCAG 2.1 compliant with ARIA support
Touch Optimized - 44px touch targets (iOS standard), gesture support

🎮 Live Demos & Examples

🌟 Main Demos

Component Showcase - Browse all 94 components with live examples
Interactive Playground - Test components with live JSON editing
Full API Documentation - Complete technical reference

🎨 Feature Demos

Ionic UX Theme Demo - ERPlora brand colors with Ionic components
Ionic Integration Demo - See iOS vs Material Design modes in action
Liquid Glass Demo - iOS 26 glassmorphism effects

📸 Component Examples

| Component | Preview | Demo | |-----------|---------|------| | <erx-cart> | Shopping cart with items, totals, tax | View Demo | | <erx-product-card> | Product cards with images, prices, badges | View Demo | | <erx-calculator> | POS calculator with operations | View Demo | | <erx-payment> | Payment methods selector | View Demo | | <erx-receipt> | Digital receipt printer | View Demo | | <erx-order-ticket> | Kitchen/bar order tickets | View Demo | | <erx-quantity-badge> | Animated quantity indicators | View Demo | | <erx-barcode-scanner> | Barcode/QR scanner | View Demo | | <erx-cash-drawer> | Cash drawer management | View Demo | | <erx-price-tag> | Price display with formatting | View Demo | | <erx-discount-badge> | Discount/sale badges | View Demo | | <erx-loyalty-card> | Customer loyalty cards | View Demo |

| Component | Preview | Demo | |-----------|---------|------| | <erx-data-grid> | Advanced data tables with sorting, filtering | View Demo | | <erx-tree> | Hierarchical tree view | View Demo | | <erx-table> | Responsive tables | View Demo | | <erx-list> | Virtual scrolling lists | View Demo | | <erx-card-list> | Card-based lists | View Demo | | <erx-timeline> | Event timelines | View Demo | | <erx-stats-card> | Statistics cards | View Demo | | <erx-metric-display> | KPI metrics | View Demo | | <erx-progress-ring> | Circular progress | View Demo | | <erx-gauge> | Gauge charts | View Demo | | <erx-sparkline> | Mini trend charts | View Demo | | <erx-json-viewer> | JSON tree viewer | View Demo | | <erx-diff-viewer> | Text diff comparison | View Demo | | <erx-code-block> | Syntax highlighted code | View Demo | | <erx-badge> | Status badges | View Demo |

| Component | Preview | Demo | |-----------|---------|------| | <erx-rich-text> | WYSIWYG editor | View Demo | | <erx-color-picker> | Color selection | View Demo | | <erx-rating> | Star ratings (with half-stars) | View Demo | | <erx-signature-pad> | Digital signatures | View Demo | | <erx-phone-input> | International phone numbers | View Demo | | <erx-date-range> | Date range picker | View Demo | | <erx-file-upload> | Drag & drop file uploads | View Demo | | <erx-slider> | Range sliders | View Demo | | <erx-toggle-group> | Toggle button groups | View Demo | | <erx-search> | Advanced search with filters | View Demo |

| Component | Preview | Demo | |-----------|---------|------| | <erx-org-chart> | Organization hierarchy | View Demo | | <erx-employee-card> | Employee profiles | View Demo | | <erx-time-clock> | Clock in/out widget | View Demo | | <erx-timesheet> | Time tracking sheets | View Demo | | <erx-shift-calendar> | Shift scheduling | View Demo | | <erx-leave-request> | Leave/vacation requests | View Demo | | <erx-attendance> | Attendance tracking | View Demo |

| Component | Preview | Demo | |-----------|---------|------| | <erx-bom-tree> | Bill of Materials tree | View Demo | | <erx-work-order> | Work order cards | View Demo | | <erx-production-line> | Production line status | View Demo | | <erx-quality-check> | Quality inspection forms | View Demo | | <erx-batch-tracker> | Batch/lot tracking | View Demo | | <erx-inventory-status> | Inventory levels | View Demo | | <erx-machine-status> | Machine monitoring | View Demo |

| Component | Preview | Demo | |-----------|---------|------| | <erx-kanban> | Kanban boards (drag & drop) | View Demo | | <erx-dashboard-grid> | Dashboard layouts | View Demo | | <erx-master-detail> | Master-detail views | View Demo | | <erx-split-pane> | Resizable split views | View Demo | | <erx-tabs> | Tab navigation | View Demo | | <erx-accordion> | Collapsible sections | View Demo | | <erx-stepper> | Multi-step forms | View Demo | | <erx-sidebar> | Collapsible sidebars | View Demo | | <erx-panel> | Resizable panels | View Demo | | <erx-masonry> | Masonry layouts | View Demo | | <erx-card-stack> | Stacked cards (swipeable) | View Demo | | <erx-carousel> | Image carousels | View Demo |

| Component | Preview | Demo | |-----------|---------|------| | <erx-calendar> | Full calendar view | View Demo | | <erx-scheduler> | Resource scheduler | View Demo | | <erx-gantt-chart> | Gantt project timelines | View Demo | | <erx-date-picker> | Date selection | View Demo |

See the complete list with live demos in the Component Showcase.

Categories:

POS/Retail: 12 components
Data Display: 15 components
Forms (Advanced): 10 components
HR/Workforce: 7 components
Manufacturing: 7 components
Layout: 12 components
Media: 11 components
Navigation: 6 components
Calendar: 4 components
Feedback: 4 components
Overlays: 4 components
Others: 2 components

Total: 94 Components

📦 Installation

NPM

npm install @erplora/erx @ionic/core

CDN

<!-- Ionic Core (required) -->
<script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core/dist/ionic/ionic.esm.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core/css/ionic.bundle.css">

<!-- ERX Components -->
<script type="module" src="https://unpkg.com/@erplora/erx/dist/erx/erx.esm.js"></script>

🚀 Quick Start

⚡ One-Minute Examples

POS Shopping Cart:

<erx-cart id="cart"></erx-cart>

<script>
  cart.items = [
    { id: '1', name: 'Laptop', price: 999, quantity: 1 },
    { id: '2', name: 'Mouse', price: 29, quantity: 2 }
  ];
  cart.taxRate = 0.21; // 21% tax
</script>

Try it live →

Product Card with Liquid Glass:

<erx-product-card class="liquid-glass" id="product"></erx-product-card>

<script>
  product.product = {
    name: 'iPhone 26 Pro',
    price: 1299.99,
    stock: 15,
    image: 'product.jpg',
    badge: 'New'
  };
</script>

Try it live →

Star Rating:

<!-- Simple -->
<erx-rating value="4.5" allow-half="true"></erx-rating>

<!-- With hearts -->
<erx-rating value="5" icon="heart" color="danger"></erx-rating>

Try it live →

Data Grid with Sorting:

<erx-data-grid id="grid"></erx-data-grid>

<script>
  grid.columns = [
    { field: 'name', header: 'Product', sortable: true },
    { field: 'price', header: 'Price', sortable: true }
  ];
  grid.data = [
    { name: 'Laptop', price: '$999' },
    { name: 'Mouse', price: '$29' }
  ];
</script>

Try it live →

🎨 With Ionic + Bootstrap Grid

ERX components work perfectly inside Ionic layouts with Bootstrap Grid for responsive design:

<!DOCTYPE html>
<html>
<head>
  <!-- Ionic Core -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core/css/ionic.bundle.css">
  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core/dist/ionic/ionic.esm.js"></script>

  <!-- ERX Components -->
  <script type="module" src="https://unpkg.com/@erplora/erx/dist/erx/erx.esm.js"></script>

  <!-- ERX Grid System (Bootstrap Grid + Ionic spacing) -->
  <link rel="stylesheet" href="https://unpkg.com/@erplora/erx/dist/erx/ionic-bootstrap-grid.css">
</head>
<body>
  <ion-app>
    <ion-header>
      <ion-toolbar>
        <ion-title>POS Dashboard</ion-title>
      </ion-toolbar>
    </ion-header>

    <ion-content>
      <!-- Bootstrap Grid with Ionic spacing -->
      <div class="container">
        <div class="row g-3">
          <!-- Responsive columns -->
          <div class="col-12 col-md-6 col-lg-4">
            <!-- Ionic Card -->
            <ion-card>
              <ion-card-header>
                <ion-card-title>Shopping Cart</ion-card-title>
              </ion-card-header>
              <ion-card-content>
                <!-- ERX Component inside Ionic Card -->
                <erx-cart id="cart"></erx-cart>
              </ion-card-content>
            </ion-card>
          </div>

          <div class="col-12 col-md-6 col-lg-8">
            <ion-card>
              <ion-card-header>
                <ion-card-title>Products</ion-card-title>
              </ion-card-header>
              <ion-card-content>
                <erx-data-grid id="products"></erx-data-grid>
              </ion-card-content>
            </ion-card>
          </div>
        </div>
      </div>
    </ion-content>
  </ion-app>

  <script>
    // Configure components
    const grid = document.getElementById('products');
    grid.columns = [
      { field: 'name', header: 'Product' },
      { field: 'price', header: 'Price' }
    ];
    grid.data = [
      { name: 'Widget', price: '$29.99' }
    ];
  </script>
</body>
</html>

React + Ionic

npm install @erplora/erx @erplora/erx-react @ionic/react

import { IonCard, IonCardContent, IonCardHeader, IonCardTitle } from '@ionic/react';
import { ErxDataGrid, ErxCart } from '@erplora/erx-react';
import '@erplora/erx/dist/erx/ionic-bootstrap-grid.css';

function Dashboard() {
  return (
    <div className="container">
      <div className="row g-3">
        <div className="col-12 col-md-6">
          <IonCard>
            <IonCardHeader>
              <IonCardTitle>Shopping Cart</IonCardTitle>
            </IonCardHeader>
            <IonCardContent>
              <ErxCart items={cartItems} />
            </IonCardContent>
          </IonCard>
        </div>

        <div className="col-12 col-md-6">
          <IonCard>
            <IonCardHeader>
              <IonCardTitle>Products</IonCardTitle>
            </IonCardHeader>
            <IonCardContent>
              <ErxDataGrid columns={columns} data={products} />
            </IonCardContent>
          </IonCard>
        </div>
      </div>
    </div>
  );
}

🎨 Design System Integration

ERX is designed to complement Ionic, not replace it:

✅ Use Ionic For:

Basic UI: <ion-button>, <ion-input>, <ion-card>
Navigation: <ion-tabs>, <ion-menu>, <ion-toolbar>
Layout: <ion-content>, <ion-grid>, <ion-list>
Overlays: <ion-modal>, <ion-alert>, <ion-toast>

✅ Use ERX For:

Enterprise Components: Data grids, Gantt charts, Kanban boards
POS Components: Cart, receipt, payment, order tickets
HR Components: Org chart, timesheets, shift calendar
Manufacturing: BOM tree, work orders, production line
Advanced Inputs: Rich text editor, signature pad, color picker

CSS Variables

ERX uses Ionic's CSS variables for perfect integration:

/* ERX automatically uses Ionic variables */
--ion-color-primary: #667eea;      /* ERX inherits this */
--ion-color-success: #22c55e;      /* ERX inherits this */
--ion-padding: 16px;               /* ERX uses this for spacing */
--ion-margin: 16px;                /* ERX uses this for margins */

/* Dark mode automatically supported */
body.dark {
  --ion-background-color: #0f172a;
  --ion-text-color: #f1f5f9;
  /* ERX components adapt automatically */
}

iOS vs Android Styling

ERX automatically inherits Ionic's platform-specific styles:

<!-- iOS mode - rounded corners (10px-12px), softer shadows, 44px buttons -->
<html class="ios">
  <erx-cart></erx-cart>
  <!-- Buttons: rounded, no uppercase, soft feel -->
  <!-- Cards: 12px border-radius, subtle shadow -->
</html>

<!-- Material Design mode - sharp corners (4px), elevation shadows, 36px buttons -->
<html class="md">
  <erx-cart></erx-cart>
  <!-- Buttons: 4px corners, UPPERCASE text, material elevation -->
  <!-- Cards: 4px border-radius, pronounced shadow -->
</html>

How it works: ERX components detect the .ios or .md class on <html> and apply platform-specific styles automatically using CSS variables and :host-context() selectors. No JavaScript detection needed!

Automatic Style Inheritance

ERX components automatically inherit Ionic styles based on CSS class naming conventions:

| Element Type | CSS Pattern | Inherits From | Example | |--------------|-------------|---------------|---------| | Buttons | *erx-*btn or *erx-*button | ion-button | .erx-cart__checkout-btn | | Cards | *erx-*card or *erx-*__container | ion-card | .erx-product-card | | List Items | *erx-*item or *erx-*__item | ion-item | .erx-cart__item | | Inputs | input[class*="erx-"] | ion-input | <input class="erx-search"> | | Badges | *erx-*badge | ion-badge | .erx-quantity-badge | | Headers | *erx-*header or *erx-*toolbar | ion-toolbar | .erx-cart__header |

Example:

// This button automatically looks like ion-button
<button class="erx-cart__checkout-btn">Checkout</button>

// This card automatically looks like ion-card
<div class="erx-product-card">...</div>

// Both adapt to iOS/MD modes automatically!

See IONIC_MIGRATION.md for detailed technical documentation.

✨ iOS 26 Liquid Glass Effect

Add Apple's Vision Pro-inspired glassmorphism to any component with a simple class:

<!-- Basic liquid glass -->
<erx-cart class="liquid-glass"></erx-cart>

<!-- Apply to any element -->
<div class="liquid-glass">
  <h2>Beautiful Glass Effect</h2>
  <p>Works with backdrop-filter blur and vibrancy</p>
</div>

Variants:

| Class | Effect | |-------|--------| | .liquid-glass | Default glass effect (20px blur, 72% opacity) | | .liquid-glass-subtle | Lighter effect (12px blur, 60% opacity) | | .liquid-glass-intense | Maximum vibrancy (32px blur, 85% opacity) | | .liquid-glass-frosted | Classic frosted glass with brightness boost | | .liquid-glass-tinted | Colored glass with hue rotation |

Features:

✅ Automatic iOS/MD adaptation (iOS gets more blur)
✅ Dark mode support
✅ Hover/active states
✅ GPU-accelerated (will-change, transform3d)
✅ Fallback for unsupported browsers
✅ Respects prefers-reduced-motion

<!-- iOS mode: 24px blur, 16px border-radius -->
<html class="ios">
  <erx-product-card class="liquid-glass"></erx-product-card>
</html>

<!-- MD mode: 16px blur, 8px border-radius -->
<html class="md">
  <erx-product-card class="liquid-glass"></erx-product-card>
</html>

See Liquid Glass Demo for live examples.

📐 Bootstrap Grid Integration

ERX includes a custom Bootstrap Grid configured for Ionic:

<!-- Import the grid -->
<link rel="stylesheet" href="https://unpkg.com/@erplora/erx/dist/erx/ionic-bootstrap-grid.css">

<!-- Use Bootstrap classes with Ionic spacing -->
<div class="container">
  <div class="row g-3">  <!-- g-3 uses --ion-padding -->
    <div class="col-12 col-md-6 col-lg-4">
      <ion-card>...</ion-card>
    </div>
  </div>
</div>

Gutter Spacing (Ionic scale)

g-0 - No gutters (0px)
g-1 - Extra small (4px)
g-2 - Small (8px)
g-3 - Medium (16px) - Default Ionic padding
g-4 - Large (24px)
g-5 - Extra large (32px)

Breakpoints (Same as Ionic)

xs: 0px
sm: 576px
md: 768px
lg: 992px
xl: 1200px

📚 Component Categories

ERX includes 94 components organized into categories:

| Category | Count | Components | |----------|-------|------------| | POS/Retail | 12 | Cart, Calculator, Payment, Receipt, Product Card, Order Ticket, Quantity Badge, etc. | | HR/Workforce | 7 | Org Chart, Employee Card, Time Clock, Shift Calendar, Leave Request, etc. | | Manufacturing | 7 | BOM Tree, Work Order, Production Line, Quality Check, Batch Tracker, etc. | | Data Display | 15 | Data Grid, Tree, Table, JSON Viewer, Diff, Sparkline, Gauge, Chart, etc. | | Forms (Advanced) | 10 | Rich Text, Color Picker, Phone Input, Signature Pad, Rating, Upload, etc. | | Layout | 12 | Kanban, Dashboard Grid, Master-Detail, Resizable Panels, Masonry, etc. | | Media | 11 | Video Player, Audio Player, QR Code, Barcode Scanner, Gallery, Image Crop, etc. | | Navigation | 6 | Mega Menu, Pagination, Dropdown, Context Menu, Command Palette, etc. | | Feedback | 4 | State (Empty/Error), Banner, Callout, Status Indicator | | Calendar | 4 | Calendar, Calendar Views, Scheduler, Gantt Chart | | Overlays | 4 | Drawer, Sheet, Lightbox, Fullscreen Modal | | Others | 2 | Split Pane, Divider |

🎨 Theming

Use Ionic Theme Variables

:root {
  /* Modify Ionic variables - ERX inherits them */
  --ion-color-primary: #667eea;
  --ion-color-success: #22c55e;
  --ion-color-warning: #eab308;
  --ion-color-danger: #ef4444;

  --ion-padding: 16px;
  --ion-margin: 16px;

  --ion-background-color: #ffffff;
  --ion-text-color: #111827;
}

/* Dark Mode */
body.dark {
  --ion-background-color: #0f172a;
  --ion-text-color: #f1f5f9;
  /* ERX components automatically adapt */
}

ERX-Specific Overrides (Optional)

/* Override specific ERX components if needed */
erx-data-grid::part(container) {
  border-radius: 12px;
}

erx-cart::part(header) {
  background: var(--ion-color-primary);
}

🛠 Development

# Install dependencies
npm install

# Start dev server
npm start

# Build for production
npm run build

# Run tests
npm test

# Generate new component
npm run generate erx-my-component

📖 Documentation

Full API Reference - Complete component documentation
Component Comparison - ERX vs UX components
Interactive Playground - Live testing
Component Showcase - All 94 components

🌐 Browser Support

| Browser | Version | |---------|---------| | Chrome | 60+ | | Firefox | 63+ | | Safari | 10.1+ | | Edge | 79+ | | iOS Safari | 10.3+ | | Android Chrome | 60+ |

🔌 ERPlora Hub Integration

Components integrate with the ERPlora Hub API bridge:

import { getErploraApi, isInErploraHub } from '@erplora/erx';

if (isInErploraHub()) {
  const api = getErploraApi('my-module');

  // Query data
  const result = await api.query({
    action: 'select',
    table: 'products',
    orderBy: 'name ASC',
  });

  // Navigate
  api.navigate('/products/123');

  // Show toast
  api.toast('Product saved!', 'success');
}

📄 License

MIT License - see LICENSE for details.

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

ERX - ERPlora eXtensions

✨ Features

🎮 Live Demos & Examples

🌟 Main Demos

🎨 Feature Demos

📸 Component Examples

📦 Installation

NPM

CDN

🚀 Quick Start

⚡ One-Minute Examples

🎨 With Ionic + Bootstrap Grid

React + Ionic

🎨 Design System Integration

✅ Use Ionic For:

✅ Use ERX For:

CSS Variables

iOS vs Android Styling

Automatic Style Inheritance

✨ iOS 26 Liquid Glass Effect

📐 Bootstrap Grid Integration

Gutter Spacing (Ionic scale)

Breakpoints (Same as Ionic)

📚 Component Categories

🎨 Theming

Use Ionic Theme Variables

ERX-Specific Overrides (Optional)

🛠 Development

📖 Documentation

🌐 Browser Support

🔌 ERPlora Hub Integration

📄 License

🔗 Links