Skip to main content

Component Library

Overview​

Shared component library for AquaGen applications.

Component Categories​

Dashboard Components​

  • Charts and graphs
  • Data tables
  • Widgets

See Dashboard Components

Alert Components​

  • Alert notifications
  • Alert management UI

See Alert Components

Shared Components​

  • Buttons
  • Forms
  • Modals
  • Navigation

Usage​

Importing Components​

import { DashboardWidget } from '@aquagen-mf-webapp/dashboard';
import { AlertPanel } from '@aquagen-mf-webapp/alerts';

Example​

import React from 'react';
import { DashboardWidget } from '@aquagen-mf-webapp/dashboard';

export const MyComponent = () => {
  return (
    <DashboardWidget
      title="Water Usage"
      data={data}
    />
  );
};

Component Documentation​

Each library has its own documentation:

  • libs/dashboard/README.md - Dashboard components
  • libs/alerts/README.md - Alert components
  • libs/components/README.md - Shared UI components

Development​

Creating New Components​

# Create new library
npm run create:lib

# Integrate library into app
npm run integrate:lib

Component Standards​

  • Use TypeScript
  • Follow Material-UI design system
  • Write unit tests
  • Document props and usage

Styling​

Components use Material-UI theming:

import { styled } from '@mui/material/styles';

const StyledComponent = styled('div')(({ theme }) => ({
  color: theme.palette.primary.main,
}));

Testing​

npx nx test <library-name>