@servicetitan/line-item-editor

Reusable line-item editor built on top of the Kendo TreeList and Anvil 2. Originally extracted from servicetitan/app packages/st-components.

A single component that replaces several legacy editing surfaces in the monolith (estimate page, SBET / input-based proposal, margin calculator, invoice page). The host injects a domain-specific data adapter + settings; the component does not know about estimates, invoices, or any specific business domain.

Installation

npm install @servicetitan/line-item-editor

Peer dependencies: react >= 18, react-dom >= 18, @servicetitan/anvil2 >= 3.0.0, @progress/kendo-react-treelist >= 5.19.0, mobx >= 6, mobx-react >= 9, dompurify >= 3 (used by the description sanitizer).

Architecture (4 layers, top-down)

L1 — core           Kendo TreeList, editing, selection, drag-and-drop,
                    tree builder, aggregation engine. Domain-agnostic.

L2 — presets        Column configurator, system column presets,
                    transaction-item / price-field type mappings.

L2.5 — shell        Anvil 2 + MobX glue: toolbar, view modes,
                    column picker, item-group card, configurable
                    services drawer, split-by-type layout.

L4 — host page      The consumer wires an IDataAdapter and ShellSettings
                    and renders <LineItemShell />. Lives in the host
                    application (monolith, MFE, etc.).

Dependencies flow strictly top-down. L1 has no knowledge of L2.5; L4 is the only layer that knows the business domain.

Quick start

import {
    LineItemShell,
    useLineItemShell,
    SystemPresets,
    type IDataAdapter,
} from '@servicetitan/line-item-editor';

const adapter: IDataAdapter = {
    /* host-provided: load, save, validate, search SKUs, ... */
};

const MyEditor = () => {
    const shell = useLineItemShell({
        adapter,
        columnPresets: SystemPresets.estimate,
        viewModes: DEFAULT_VIEW_MODES,
    });

    return <LineItemShell {...shell} />;
};

Public API surface

L1 — core

| Export | Purpose | | --- | --- | | LineItemEditor | Low-level TreeList editor. Used by LineItemShell. | | ItemToolbar / ActionsMenu | Composable toolbar pieces. | | DataManager | Owns the in-memory rows + pending changes. | | SelectionManager | Multi-select + range selection state. | | buildTree / recomputeVirtualAggregates | Flat → tree transform, virtual aggregates. | | computeAggregations | Group totals (sum, count, weighted average). | | ColumnConfigurationManager | Per-user, per-grid column visibility/order/width. |

L1 — editors (cell editors)

TextEditor, NumberEditor, CurrencyEditor, BooleanEditor, TextareaEditor, DropdownEditor, ComboboxEditor, SkuPickerEditor.

createEditorRegistry lets the host register additional editors keyed by column type.

L1 — types

LineItemNode, ViewConfig, ColumnConfig, HierarchyConfig, AggregationConfig, RowLockRule, RowAction, IDataAdapter, MutationResult, SearchResultItem, DataContext, CreateContext, SearchContext, MoveTarget, BulkOperation, ValidationResult, EditorPlugin, EditorProps, ChangeEvent, PendingChange, ClientValidationRule, LineItemEditorProps, LineItemEditorRef, ExternalEditorContext, CellRendererProps.

L2 — presets

| Export | Purpose | | --- | --- | | createColumnContext | Build the per-row context passed to columns. | | SystemPresets | Built-in column sets (estimate, invoice, …). | | getConfigurableColumns | Compute which columns the user can toggle. | | TransactionItemType, CalculatePriceFields (types) | Pricing-adjacent type aliases. |

L2.5 — shell

| Export | Purpose | | --- | --- | | LineItemShell | The full grid + toolbar + drawers composite. Drop in. | | useLineItemShell | Hook that wires adapter + settings into a shell. | | ShellGridKeys, getGridKey | Build-time constants for grid identifiers used by column-config storage. | | SplitByTypeLayout | Layout that renders one grid per SKU type. | | ShellOverlays | Loading / error / empty overlays. | | DefaultToolbar, DEFAULT_VIEW_MODES, ItemGroupCard | Stock toolbar + view modes + group card. | | createNameAndCodeView, createDescriptionView | View-mode factory helpers. | | ConfigurableServicesDrawer | Drawer for the "configurable service" workflow. | | PricingItemsGrid, PricingToolbar | Pricing-tool / margin-calc grid. |

Utilities

| Export | Purpose | | --- | --- | | sanitizeHtml, sanitizeRichText, stripHtml | DOMPurify-backed sanitizers for description fields. | | formatMoney | Locale-aware currency formatter (replaces accounting). |

Adjacent components

This package also ships a small RichTextEditor used inside the editor description fields. It lives at @servicetitan/line-item-editor/... once we firm up the entry-points; for now it is re-exported from the root index.

Storage / persistence

The editor never persists anything on its own. The host supplies an IDataAdapter for line-item CRUD and an IColumnConfigStorage for per-user column configuration. Both interfaces are exported from L1.

Status

Pre-release (v0.0.x). Public API still in motion. No tests yet — tests are tracked as the next blocker before a 1.0 cut.