React Component Library

A production-ready React component library for building consistent, accessible, and scalable user interfaces across applications.

This package is designed for:

• Shared UI primitives and composed components
• Design consistency through reusable tokens and theming
• Faster product development with predictable APIs

Installation

npm install @ambuj.bhaskar/react-component-library

Peer dependencies:

• react >= 18
• react-dom >= 18

Quick Start

import React from "react";
import {
  ThemeProvider,
  Button,
  Input,
} from "@ambuj.bhaskar/react-component-library";
import "@ambuj.bhaskar/react-component-library/style.css";

export default function App() {
  return (
    <ThemeProvider>
      <div style={{ display: "grid", gap: 12 }}>
        <Input placeholder="Enter value" />
        <Button label="Submit" />
      </div>
    </ThemeProvider>
  );
}

Storybook Grouping Model

Components are organized in Storybook using a design-system-first information architecture:

• Components/Atoms - foundational UI building blocks
• Components/Molecules - composed patterns built from atoms
• Components/Templates - larger layout- and flow-level building blocks
• Components/Products/* - project-specific groupings for components that are free to use, but are often tailored to narrower workflows and may not be universally reusable across every application

Theming and Utilities

The library ships with:

• ThemeProvider to provide theme context
• useTheme to access active theme values
• DEFAULT_THEME for a baseline token set
• Utility hooks/functions such as useToast, showToast, usePagination, useResize, and usePointerState

Minimal setup pattern:

import {
  ThemeProvider,
  DEFAULT_THEME,
} from "@ambuj.bhaskar/react-component-library";

<ThemeProvider theme={DEFAULT_THEME}>{/* app */}</ThemeProvider>;

Component Usage Reference

All components can be imported from the package root.

import {
  Button,
  Input,
  Modal,
} from "@ambuj.bhaskar/react-component-library";

Atoms

• Badge

  <Badge label="New" />

• Button

  <Button label="Save" onClick={() => {}} />

• Chart

  <Chart type="bar" data={chartData} />

• DatePicker

  <DatePicker value={date} onChange={setDate} />

• DateRangePicker

  <DateRangePicker startDate={startDate} endDate={endDate} onChange={setRange} />

• Dropdown

  <Dropdown options={options} selected={value} onChange={setValue} />

• FileUpload

  <FileUpload onUpload={handleUpload} />

• Heatmap

  <Heatmap data={heatmapData} />

• Icon

  <Icon name="search" size={18} />

• Input

  <Input placeholder="Type here" value={value} onChange={setValue} />

• LiveDot

  <LiveDot status="live" />

• Menu

  <Menu items={items} onSelect={onSelect} />

• Modal

  <Modal isOpen={isOpen} onClose={onClose}>Modal content</Modal>

• MonthPicker

  <MonthPicker value={month} onChange={setMonth} />

• Multiselect

  <Multiselect options={options} selected={selected} onChange={setSelected} />

• Popover

  <Popover content="Additional info">Hover me</Popover>

• Select

  <Select options={options} value={value} onChange={setValue} />

• Spinner

  <Spinner size="md" />

• Switch

  <Switch checked={enabled} onChange={setEnabled} />

• Table

  <Table columns={columns} data={rows} />

• Toast

  <Toast title="Saved" type="success" />

• WeekPicker

  <WeekPicker value={week} onChange={setWeek} />

• AwiCanvas

  <AwiCanvas imageUrl={imageUrl} onSelectionChange={onSelectionChange} />

Molecules

• ButtonGroup

  <ButtonGroup options={options} active={active} onChange={setActive} />

• CompactEventCard

  <CompactEventCard event={event} onClick={onOpen} />

• ContactInput

  <ContactInput value={contacts} onChange={setContacts} />

• DetectionCarousel

  <DetectionCarousel items={detections} onSelect={onSelect} />

• Pagination

  <Pagination page={page} totalPages={totalPages} onPageChange={setPage} />

• Refresh

  <Refresh onRefresh={refetch} intervalOptions={intervals} />

• Sidebar

  <Sidebar menuItems={menuItems} activeItem={activeItem} onSelect={onSelect} />

• Topbar

  <Topbar title="Dashboard" actions={actions} />

Templates

• EventPreview

  <EventPreview event={event} />

• FloorMapView

  <FloorMapView mapData={mapData} />

• FormGroup

  <FormGroup fields={fields} onSubmit={handleSubmit} />

• LoginPage

  <LoginPage onSubmit={onLogin} loading={loading} />

• MapView

  <MapView markers={markers} center={center} />

Project-Specific (Components/Products/*)

These are free to use, but intentionally specialized for certain product flows.

• AwiCustomConfirmation

  <AwiCustomConfirmation onConfirm={onConfirm} />

• AwiEmptyState

  <AwiEmptyState title="No Data" description="Try adjusting filters." />

• AwiInput

  <AwiInput value={value} onChange={setValue} />

• AwiMessageScreen

  <AwiMessageScreen type="info" title="Processing" />

• AwiModal

  <AwiModal isOpen={open} onClose={onClose}>...</AwiModal>

• AwiModalBody

  <AwiModalBody>Body content</AwiModalBody>

• AwiModalFooter

  <AwiModalFooter>Footer actions</AwiModalFooter>

• AwiModalHeader

  <AwiModalHeader title="Modal title" />

• AwiModalRow

  <AwiModalRow label="Name" value="Camera 1" />

• AwiSlider

  <AwiSlider min={0} max={100} value={value} onChange={setValue} />

• AwiTableBar

  <AwiTableBar title="Events" actions={actions} />

• AwiTableInfinite

  <AwiTableInfinite rows={rows} onLoadMore={loadMore} />

• AwiToastMessage

  <AwiToastMessage message="Operation complete" type="success" />

• Backdrop

  <Backdrop open={isOpen} onClick={onClose} />

Project-Specific Table Building Blocks

Exported as standalone pieces for advanced composition:

• AwiLoadMoreButton

  <AwiLoadMoreButton onClick={loadMore} />

• AwiPagination

  <AwiPagination page={page} totalPages={totalPages} onChange={setPage} />

• AwiScrollableTableCellList

  <AwiScrollableTableCellList items={items} />

• AwiTableBody

  <AwiTableBody rows={rows} />

• AwiTableCell

  <AwiTableCell value={value} />

• AwiTableHeader

  <AwiTableHeader label="Status" />

• AwiTableHeaders

  <AwiTableHeaders columns={columns} />

• AwiTableRow

  <AwiTableRow row={row} />

TypeScript Support

The package exports component prop types and related interfaces directly from the root module.

import type {
  ButtonProps,
  InputProps,
  ThemeProviderProps,
} from "@ambuj.bhaskar/react-component-library";

Development Commands

npm run storybook      # local Storybook
npm run build          # library build
npm run lint           # lint checks
npm run build-storybook

Best Practices

• Wrap your app once with ThemeProvider
• Prefer consuming components from root imports only
• Start with atom-level components and compose upward
• Use project-specific components when your flow matches their intent
• Validate all prop combinations in Storybook before production rollout