Component Library
The shared, reusable UI components live in libs/components/src/ and are built
on Material-UI 7. This page explains how to import them and lists the
categories you'll actually use.
How importing works (read this first)
Components are organized into ~37 category folders under libs/components/src/.
You import them by subpath:
// Folder barrel import (when the folder has an index.js) — named export
import { WaterTank } from '@aquagen-mf-webapp/components/waterTank';
// Direct file import (always works) — default export
import AppButton from '@aquagen-mf-webapp/components/button/AppButton';
@aquagen-mf-webapp/components maps to an empty index.js — there is no
root barrel export. import { X } from '@aquagen-mf-webapp/components' resolves
to nothing. Always import from a category subpath.
Two valid styles:
| Style | Path shape | Export kind | Notes |
|---|---|---|---|
| Folder barrel | .../components/<folder> | named | Only works if the folder has an index.js |
| Direct file | .../components/<folder>/<File> | default | Always works; most component files are export default |
Convention: each component file is a export default, and the folder's
index.js (where present) re-exports it as a named export
(export { default as X } from './X.jsx'). Some folders — notably dialogs and
search — have no index.js, so you must use the direct-file form.
The path alias is defined in tsconfig.base.json:
"@aquagen-mf-webapp/components/*": ["libs/components/src/*"]
Most-used components
These are the components imported most across the codebase — a good starting set.
| Component | Import | Export |
|---|---|---|
| If / IfNot | @aquagen-mf-webapp/components/logical/If · .../logical/IfNot | default |
| CustomLoader | @aquagen-mf-webapp/components/loader/loader | default (CustomLoader) |
| AppButton | @aquagen-mf-webapp/components/button/AppButton | default |
| AppInput | @aquagen-mf-webapp/components/input/AppInput | default |
| FixedBar | @aquagen-mf-webapp/components/fixedBar/FixedBar | default |
| SubPageWrapper | @aquagen-mf-webapp/components/helper/SubPageWrapper | default |
| PermissionWrapper | @aquagen-mf-webapp/components/permissionWrapper/PermissionWrapper | default |
| WaterTank | @aquagen-mf-webapp/components/waterTank | named |
| ConsumptionIndicator | @aquagen-mf-webapp/components/consumptionIndicator/ConsumptionIndicator | default |
| SearchComponent | @aquagen-mf-webapp/components/search/SearchComponent | default |
| AppDatePickerSelection | @aquagen-mf-webapp/components/date-picker/AppDatePickerSelection | default |
Conditional rendering — If / IfNot
The most-used components in the whole library. If renders its children when
condition is truthy; IfNot renders them when condition is falsy.
import If from '@aquagen-mf-webapp/components/logical/If';
import IfNot from '@aquagen-mf-webapp/components/logical/IfNot';
<If condition={isLoggedIn}>
<UserDashboard />
</If>
<IfNot condition={hasData}>
<EmptyState />
</IfNot>
Permission-gated rendering — PermissionWrapper
Shows its children only when the current user has the required access. Used throughout the app for feature gating.
import PermissionWrapper from '@aquagen-mf-webapp/components/permissionWrapper/PermissionWrapper';
<PermissionWrapper>
<AdminPanel />
</PermissionWrapper>;
See Permissions for how access is resolved.
Loading state — CustomLoader
import CustomLoader from '@aquagen-mf-webapp/components/loader/loader';
The loader folder also exports BackdropLoader, DotLoader, and
FullScreenLoader (via loader/index.js) for full-screen and inline variants.
Category folders
Every folder under libs/components/src/. Names are case-sensitive (mostly
camelCase; date-picker is the only kebab-case folder).
Layout & navigation
app, appNavBar (e.g. SideBarDrawer), pages (MainLayout,
LoginController, SplashController), fixedBar, helper (SubPageWrapper,
Expanded), offlineView, onlineView
Inputs & controls
button (AppButton), input (AppInput, AppNumberInput, FileInput,
LabeledTextField), date-picker (several variants — see Date pickers),
toggle, multiSlider, search (SearchComponent), gesture
Charts & data display
graph (Recharts pieces: LineGraph, DashboardLineGraph, AppLegends,
tooltips…), barGraph (BarGraph, GroundWaterGraph, GroundWaterLineGraph),
lineGraph, pieChart, legends, waterTank (WaterTank, GroundWaterTank),
consumptionIndicator (ConsumptionIndicator, EnergyIndicator), highlight,
totalComponents
Feedback & overlays
dialogs (AlertDialog, LeakageDetectionDialog, NewChangesDialog,
IntroducingNewFeatureDialoge), loader, popover, tooltip, alert,
permissionPopup, info (GenericInfo, AlertInfo, PageNotFound,
useContactSales)
Logic & misc
logical (If, IfNot), permissionWrapper, clock, videoPlayer,
pricing, assets
The dialogs folder has no index.js — import each dialog by file, e.g.
import AlertDialog from '@aquagen-mf-webapp/components/dialogs/AlertDialog'.
Date pickers
date-picker/ has several components built on two libraries. Going forward,
use AppDatePickerSelection — the others still work but are legacy, so
don't build new screens on them.
| Component | Library | Status |
|---|---|---|
AppDatePickerSelection | react-multi-date-picker + moment | Standard — use this |
AppDatePicker | react-multi-date-picker + moment | Legacy |
AppDateRangePicker | react-multi-date-picker + moment | Legacy |
CustomMultiDateRangePicker | hand-built on moment | Legacy |
CustomSingleDatePicker | @mui/x-date-pickers (AdapterMoment) + moment | Legacy |
TodayDate | — | Helper |
popover/DatePopover | wraps a picker in a popover | Helper |
All sit on moment, the app's date library. Import by file, e.g.
import AppDatePickerSelection from '@aquagen-mf-webapp/components/date-picker/AppDatePickerSelection'.
Charts
Every chart in this library uses Recharts — graph/, lineGraph/,
barGraph/, and pieChart/ are all Recharts, so use Recharts for new charts.
chart.js (with react-chartjs-2) is an installed dependency used in exactly one
place — the water-neutrality treemap (Recharts has no treemap) — and is not a
general-purpose option here.
Underlying libraries
Beyond Material-UI 7, the component library relies on:
| Purpose | Library |
|---|---|
| Charts | recharts |
| Treemap only | chart.js + react-chartjs-2 |
| Date pickers (standard) | react-multi-date-picker |
| Date pickers (legacy) | @mui/x-date-pickers |
| Dates | moment |
Exact versions live in package.json.
Conventions
- Prefer folder-barrel imports where an
index.jsexists; fall back to the direct-file (default-export) form otherwise. - Reuse before you build. Most UI needs are already covered here — check this library first.
- Material-UI theming. Components read from the MUI theme
(
useTheme()→theme.palette,theme.spacing, …), so they adapt to the app's theme automatically.
Next Steps
- Shared Library — the non-UI foundation library (state, services, constants)
- Permissions — how
PermissionWrapperdecides access - Utilities & Helpers — shared functions used with these components
- Commands Reference — how to create and integrate a new library