Skip to main content

Component Library

High-level overview of the reusable component library in AquaGen.

Overview​

AquaGen has 39+ component categories with hundreds of reusable UI components.

Location: libs/components/src/

Built with: Material-UI 7.2.0 + Custom Components

Component Categories​

AppNavBar​

Purpose: Main navigation bar

Components:

  • AppBarLeftMenu - Left sidebar menu
  • AppBarRightMenu - User menu and actions
  • AppSideBar - Collapsible sidebar

Usage:

import AppNavBar from '@aquagen-mf-webapp/components/appNavBar';

<AppNavBar />

FixedBar​

Purpose: Fixed header/toolbar

Features:

  • Sticky header
  • Scroll behavior
  • Custom content

Input Components​

AppInput​

Purpose: Customized text inputs

Features:

  • Text, number, password types
  • Validation states
  • Custom styling
  • Max length
  • Placeholder

Usage:

import { AppInput } from '@aquagen-mf-webapp/components/input';

<AppInput
  placeholder="Enter value"
  value={value}
  onChange={handleChange}
  error={hasError}
  maxLength={50}
/>

AppButton​

Purpose: Styled buttons

Features:

  • Multiple variants
  • Loading states
  • Icons
  • Custom colors

Usage:

import { AppButton } from '@aquagen-mf-webapp/components/button';

<AppButton
  value="Save"
  onClick={handleSave}
  isLoading={loading}
  startIcon={<SaveIcon />}
/>

Date & Time Components​

DatePicker​

Purpose: Date selection

Features:

  • Single date
  • Date range
  • Custom formats
  • Validation

Types:

  • AppDatePicker - Single date
  • AppDateRangePicker - Date range
  • Custom date pickers (10 variants)

Graph & Chart Components​

BarGraph​

Purpose: Bar chart visualization

Features:

  • Vertical/horizontal bars
  • Multiple datasets
  • Interactive tooltips
  • Custom colors

LineGraph​

Purpose: Line chart visualization

Features:

  • Multiple lines
  • Area charts
  • Real-time updates
  • Zoom/pan

PieChart​

Purpose: Pie/donut charts

Features:

  • Percentage display
  • Custom colors
  • Interactive

Graph Components (13 types)​

  • Time series graphs
  • Heatmaps
  • Treemaps
  • Comparison graphs
  • And more...

Usage:

import { BarGraph } from '@aquagen-mf-webapp/components/graph';

<BarGraph
  data={chartData}
  xLabel="Date"
  yLabel="Value"
/>

Display Components​

WaterTank​

Purpose: Visual water level indicator

Features:

  • Animated water level
  • Custom colors
  • Percentage display

ConsumptionIndicator​

Purpose: Consumption gauge

Features:

  • Circular/linear gauges
  • Color-coded thresholds
  • Animated

Highlight​

Purpose: Highlighted data cards

Features:

  • Metric display
  • Trend indicators
  • Custom styling

TotalComponents​

Purpose: Summary totals

Features:

  • Aggregate values
  • Multiple metrics
  • Comparison views

Feedback Components​

Alert​

Purpose: Alert messages

Features:

  • Success/error/warning/info
  • Dismissible
  • Custom actions

Dialogs (13 types)​

Purpose: Modal dialogs

Types:

  • AlertDialog - Confirmation dialogs
  • FormDialog - Form modals
  • InfoDialog - Information display
  • Custom feature dialogs

Usage:

import { AlertDialog } from '@aquagen-mf-webapp/components/dialogs';

<AlertDialog
  open={isOpen}
  title="Confirm Action"
  message="Are you sure?"
  onConfirm={handleConfirm}
  onCancel={handleCancel}
/>

Loader (7 types)​

Purpose: Loading indicators

Types:

  • Spinner loaders
  • Skeleton loaders
  • Progress bars
  • Full-screen loaders

Popover​

Purpose: Contextual overlays

Features:

  • Hover/click triggers
  • Positioned content
  • Custom styling

Tooltip​

Purpose: Hover information

Features:

  • Auto-positioning
  • Custom content
  • Delay options

Layout Components​

Pages​

Purpose: Page layouts

Components:

  • MainLayout - Main app layout
  • LoginScreen - Login page
  • SplashScreen - Loading screen

OfflineView​

Purpose: Offline state display

Features:

  • Network detection
  • Offline message
  • Retry logic

OnlineView​

Purpose: Online state wrapper

Features:

  • Show when online
  • Auto-update

Logical Components​

If / IfNot​

Purpose: Conditional rendering

Usage:

import { If, IfNot } from '@aquagen-mf-webapp/components/logical';

<If condition={isLoggedIn}>
  <UserDashboard />
</If>

<IfNot condition={hasData}>
  <EmptyState />
</IfNot>

Interactive Components​

Toggle​

Purpose: Toggle switches

Features:

  • On/off states
  • Custom labels
  • Disabled states

MultiSlider​

Purpose: Range sliders

Features:

  • Single/double handles
  • Min/max values
  • Step increments

Gesture​

Purpose: Touch/click handlers

Features:

  • Tap detection
  • Swipe gestures
  • Custom events

Media Components​

VideoPlayer​

Purpose: Video playback

Features:

  • Custom controls
  • Fullscreen
  • Playback controls

Clock​

Purpose: Time display

Features:

  • Real-time clock
  • Stopwatch
  • Countdown timer

Info​

Purpose: Info icons and tooltips

Features:

  • Help icons
  • Info popups
  • Custom content

Special Components​

BugReport​

Purpose: Bug reporting widget

Features:

  • Screenshot capture
  • Form submission
  • Error tracking

PermissionPopup​

Purpose: Browser permission requests

Features:

  • Notification permission
  • Location permission
  • Custom messages

PermissionWrapper​

Purpose: Permission-based rendering

Features:

  • Role-based display
  • Permission checks
  • Negate mode

Usage:

import PermissionWrapper from '@aquagen-mf-webapp/components/permissionWrapper';

<PermissionWrapper tag="ADMIN">
  <AdminPanel />
</PermissionWrapper>

Component Patterns​

1. Controlled Components​

const [value, setValue] = useState('');

<AppInput
  value={value}
  onChange={(e) => setValue(e.target.value)}
/>

2. Loading States​

<AppButton
  value="Save"
  isLoading={loading}
  onClick={handleSave}
/>

3. Error States​

<AppInput
  value={email}
  error={!isValid}
  helperText="Invalid email"
/>

4. Conditional Rendering​

<If condition={hasPermission}>
  <ProtectedFeature />
</If>

Styling​

Theme Integration​

All components use Material-UI theming:

import { useTheme } from '@mui/material';

const theme = useTheme();
// Access theme.palette, theme.spacing, etc.

Custom Styling​

<AppButton
  restStyle={{
    backgroundColor: '#custom',
    borderRadius: '8px'
  }}
/>

Accessibility​

All components follow accessibility best practices:

  • ARIA labels
  • Keyboard navigation
  • Focus management
  • Screen reader support

Best Practices​

  1. Use existing components - Don't recreate
  2. Follow patterns - Consistent usage
  3. Accessibility first - Include ARIA
  4. Responsive design - Mobile-friendly
  5. Error handling - Show validation states

Component Imports​

Individual Import​

import { AppInput } from '@aquagen-mf-webapp/components/input';
import { AppButton } from '@aquagen-mf-webapp/components/button';

Category Import​

import AppNavBar from '@aquagen-mf-webapp/components/appNavBar';

Next Steps​

Last Updated: February 2026