shared-inventory — Frontend Library

React component library for the SharedInventory module. Exports production-ready pages, tables, dialogs, and hooks that hosts (Improve, WinOps Core) consume by wrapping them with an InventoryApiProvider.

Installation

npm install shared-inventory

Peer dependencies: react >=18, react-dom >=18, @cwellt_software/cwellt-reactjs-lib >=1.3

Quick Start

import {
  InventoryApiProvider,
  InventoryPage,
  OpenInspectionsPage,
  InventorySettingsPage,
  HttpInventoryApi,
} from 'shared-inventory';

const api = new HttpInventoryApi('/api/inventory');

function App() {
  return (
    <InventoryApiProvider api={api}>
      <InventoryPage />
    </InventoryApiProvider>
  );
}

Exported Pages

| Component | Description | |-----------|-------------| | InventoryPage | Main inventory table + equipment form dialog | | OpenInspectionsPage | Dashboard of open/overdue inspections | | InventorySettingsPage | Admin CRUD for catalogs (categories, statuses, locations, equipment types, action types, field definitions) |

All pages accept an optional labels?: PartialInventoryLabels prop for i18n overrides.

API Layer

| Implementation | Use case | |----------------|----------| | HttpInventoryApi | Production — wraps fetch with configurable base URL | | InMemoryInventoryApi | Dev/testing — in-memory Map store, no network | | Custom InventoryApi | Host implements the InventoryApi interface with any HTTP client |

i18n

All UI strings are externalised via InventoryLabels. Hosts provide partial overrides:

import { InventoryPage, defaultInventoryLabels } from 'shared-inventory';

const spanishLabels = {
  page: { title: 'Inventario', createButton: 'Crear equipo' },
  table: { nameColumn: 'Nombre', statusColumn: 'Estado' },
};

<InventoryPage labels={spanishLabels} />

Development

npm run dev        # Vite dev server with demo App.tsx
npm test           # Vitest (36+ tests)
npm run build      # Library build (CJS + ESM + types)

Architecture

See ADR-002 for full details.

• MVVM pattern: Components = Views, Hooks = ViewModels, TypeScript types = Model
• DI via React Context: Hooks call useInventoryApi() — never import fetch directly
• Cw-library components: All UI built with CwTable, CwDialog, CwTabs, CwMultiFilter, etc.

src/
  domain/       → TypeScript types (mirrors C# records)
  api/          → InventoryApi interface + implementations
  context/      → React Context providers (DI)
  hooks/        → Custom hooks (one per use case)
  components/   → Production UI (pages, tables, forms, modals, settings)
  i18n/         → Label types + defaults + context
  index.ts      → Public API (re-exports)