@trackers/ui

A comprehensive React component library for energy renovation project management and tracking. Built with React, TypeScript, and Tailwind CSS.

Installation

npm install @trackers/ui

Peer Dependencies

Make sure you have these installed in your project:

npm install react react-dom lucide-react recharts

Setup

Import the stylesheet in your app's entry point:

import '@trackers/ui/styles.css';

Then import and use any component:

import { Button, Card, StatCard } from '@trackers/ui';

Components

Atoms (Base UI)

| Component | Description | |-----------|-------------| | Button | Action button with variants: primary, secondary, ghost, danger, outline | | Input | Text input with label, error state, and password visibility toggle | | Select | Dropdown select with options | | Textarea | Multi-line input with optional character counter | | Checkbox | Controlled checkbox with label and description | | RadioGroup | Radio button group (horizontal or vertical) | | Badge | Status indicator with color variants | | Tag | Removable label/tag | | Avatar | User avatar with auto-generated initials from name | | Toggle | On/off switch | | SearchInput | Search field with magnifying glass icon | | Spinner | Loading spinner with optional label | | FullPageSpinner | Full-page loading overlay | | Divider | Separator line, optionally with centered label | | ColorDot | Colored dot with optional label | | Legend | Collection of ColorDots for chart legends | | Slider | Range slider with visual feedback |

Molecules (Composite)

| Component | Description | |-----------|-------------| | Card / CardHeader | Container card with optional header and action slot | | StatCard | Single metric display with icon and optional total | | ScoreCircle | Circular score with color-coded ring (green/orange/red) | | ProgressBar | Horizontal progress indicator | | UploadZone | Drag-and-drop file upload area | | FileInput | File input with preview list and remove | | FilterBar | Horizontal filter button group | | AlertBanner | Alert message with icon (info, success, warning, danger) | | NotificationItem | Single notification row | | MetricCard | Styled metric display card | | ComplianceCheck | Checklist with pass/fail indicators | | AidListItem | Aid/subsidy eligibility and amount display | | CostBar | Stacked horizontal bar for cost breakdowns | | Pipeline | Project stage view with counts | | ScoreCriteriaRow | Score row with weight and progress | | GradientHeader | Gradient background header section | | EmptyState | "No data" placeholder with icon and optional action | | ListItem / ListGroup | Reusable list rows with icon, subtitle, and chevron | | Tooltip | Hover tooltip with arrow positioning |

Complex

| Component | Description | |-----------|-------------| | DataTable | Generic data table with customizable columns and row click | | DPEScale | French DPE energy rating scale (A-G) | | DPEBadge | Large visual badge for DPE class | | Timeline | Vertical project timeline with step statuses | | PricingCard | Pricing plan card with features list | | RecommendationCard | Renovation recommendation with cost/savings analysis | | Tabs | Tab navigation (underline, pills, boxed variants) | | Breadcrumb | Navigation breadcrumb trail | | Pagination | Page navigation control | | Accordion | Collapsible sections (single or multiple open) | | Stepper | Multi-step form progress indicator | | Calendar | Month calendar with date selection | | DatePicker | Input field with popup calendar | | Skeleton / SkeletonText / SkeletonCard / SkeletonTable | Loading placeholders | | KanbanBoard / KanbanColumn | Kanban board with columns and cards | | Dropdown / DropdownButton | Context menu with custom trigger | | Popover | Generic popover container |

Overlays

| Component | Description | |-----------|-------------| | Modal | Centered dialog with title, content, and footer | | Drawer | Side panel overlay (left or right) | | ConfirmDialog | Confirmation modal with confirm/cancel actions | | ToastProvider / useToast | Toast notification system |

Layout

| Component | Description | |-----------|-------------| | TopBar | App header with search and notifications | | Sidebar | Collapsible navigation sidebar with user profile |

Usage Examples

Button

import { Button } from '@trackers/ui';
import { Plus } from 'lucide-react';

<Button variant="primary" size="md" icon={Plus}>
  Create Project
</Button>

Card with StatCard

import { Card, CardHeader, StatCard } from '@trackers/ui';
import { Users, Building } from 'lucide-react';

<Card>
  <CardHeader title="Overview" />
  <div style={{ display: 'flex', gap: '1rem' }}>
    <StatCard label="Total Users" value={142} icon={Users} />
    <StatCard label="Projects" value={38} total={50} icon={Building} />
  </div>
</Card>

Toast Notifications

import { ToastProvider, useToast, Button } from '@trackers/ui';

// Wrap your app
function App() {
  return (
    <ToastProvider position="top-right">
      <MyComponent />
    </ToastProvider>
  );
}

// Use in any component
function MyComponent() {
  const { addToast } = useToast();

  return (
    <Button onClick={() => addToast('Saved successfully!', 'success')}>
      Save
    </Button>
  );
}

Modal

import { Modal, Button } from '@trackers/ui';
import { useState } from 'react';

function MyComponent() {
  const [open, setOpen] = useState(false);

  return (
    <>
      <Button onClick={() => setOpen(true)}>Open Modal</Button>
      <Modal open={open} onClose={() => setOpen(false)} title="Confirm Action">
        <p>Are you sure you want to proceed?</p>
      </Modal>
    </>
  );
}

DPE Energy Rating

import { DPEScale, DPEBadge } from '@trackers/ui';

<DPEScale currentClass="D" label="Current Rating" />
<DPEBadge dpeClass="B" size="lg" />

DataTable

import { DataTable } from '@trackers/ui';

const columns = [
  { key: 'name', header: 'Name' },
  { key: 'status', header: 'Status', render: (row) => <Badge variant="success">{row.status}</Badge> },
  { key: 'score', header: 'Score', align: 'right' as const },
];

const data = [
  { name: 'Project A', status: 'Active', score: 85 },
  { name: 'Project B', status: 'Pending', score: 62 },
];

<DataTable columns={columns} data={data} onRowClick={(row) => console.log(row)} />

App Layout

import { Sidebar, TopBar } from '@trackers/ui';
import { Home, FolderOpen, Settings } from 'lucide-react';

const navItems = [
  { id: 'home', icon: Home, label: 'Dashboard' },
  { id: 'projects', icon: FolderOpen, label: 'Projects' },
  { id: 'settings', icon: Settings, label: 'Settings' },
];

function AppLayout({ children }) {
  const [activeId, setActiveId] = useState('home');

  return (
    <div style={{ display: 'flex' }}>
      <Sidebar
        items={navItems}
        activeId={activeId}
        onNavigate={setActiveId}
        userName="John Doe"
        userRole="Admin"
      />
      <div style={{ flex: 1 }}>
        <TopBar title="Dashboard" onSearch={(q) => console.log(q)} />
        <main>{children}</main>
      </div>
    </div>
  );
}

Storybook

Browse all components interactively:

npm run storybook

Tech Stack

• React >= 18
• TypeScript
• Tailwind CSS v4
• Lucide React for icons
• Recharts for charts
• Vite for building

License

MIT