sets-ui-adapter

Independent, API-compatible adapters for the specific subset of KendoReact components that the SETS frontend uses, built on the Government of Alberta Design System 2.0 (@abgov/react-components + @abgov/web-components).

The goal is to let SETS standardize on the Government of Alberta Design System by changing only its import statements — the component and function signatures are preserved, so the application code that uses them does not change.

This package re-implements only the small set of APIs that SETS consumes. It is a fresh implementation on top of the GoA Design System and does not include, copy, or redistribute any KendoReact or Kendo UI source code.

What it provides

| Kendo import (before) | Adapter import (after) | Exports | | --- | --- | --- | | @progress/kendo-data-query | sets-ui-adapter/data-query | process, filterBy, orderBy | | @progress/kendo-react-grid | sets-ui-adapter/grid | Grid, GridColumn, GridToolbar, GridColumnMenuFilter | | @progress/kendo-react-excel-export | sets-ui-adapter/excel-export | ExcelExport | | @progress/kendo-react-dateinputs | sets-ui-adapter/dateinputs | DatePicker |

All of the above are also re-exported from the package root (sets-ui-adapter).

Behaviour notes

• Grid is controlled, exactly like Kendo's. It renders the already process()-ed { data, total } you pass it and emits onDataStateChange ({ dataState: { skip, take, sort, filter } }), onColumnReorder and onColumnResize. It does no filtering/sorting/paging of its own.
• Custom cell renderers may return a Kendo-style <td> (as SETS' CustomCells do). The grid clones the returned <td> to add the data-grid="cell" marker the GoA data grid needs for keyboard navigation, so existing cell renderers work unchanged. Renderers that return plain content are wrapped in a marked <td> automatically.
• Per-column filtering is handled by GridColumnMenuFilter, which renders a type-aware editor (text / numeric / date / boolean). Date columns expose two conditions joined by an AND/OR selector, so a separate custom datetime filter UI is no longer required.
• ExcelExport infers its columns from the wrapped Grid (via context) and exposes a ref.save(rows) method, like Kendo. The export work is deferred to a macrotask so a caller that sets a loading flag before calling save() gets an observable spinner; onExportComplete fires when done. The .xlsx is written by a zero-dependency OOXML writer (no runtime dependency).
• Pagination uses GoabPagination, which scales to large data sets (no per-page dropdown).

Installation

npm install sets-ui-adapter

Peer dependencies

Provided by the host application:

• react / react-dom (>= 18)
• @abgov/react-components, @abgov/web-components, @abgov/design-tokens

Importing the package (or the grid / dateinputs subpaths) registers the GoA web components and loads their base styles + design tokens automatically.

Styles

Import the adapter's grid stylesheet once (e.g. in your app entry):

import "sets-ui-adapter/styles.css";

Icons

The GoA components render their icons with ionicons, which must be available on the page. Include it once in your index.html, pinned to a specific version:

<script type="module" src="https://cdn.jsdelivr.net/npm/[email protected]/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://cdn.jsdelivr.net/npm/[email protected]/dist/ionicons/ionicons.js"></script>

Example (how SETS uses it)

import {process, filterBy, orderBy} from "sets-ui-adapter/data-query";
import {Grid, GridColumn, GridColumnMenuFilter, GridToolbar} from "sets-ui-adapter/grid";
import {ExcelExport} from "sets-ui-adapter/excel-export";
import {DatePicker} from "sets-ui-adapter/dateinputs";

// ...identical usage to the previous KendoReact code.

Development

npm install
npm test        # Vitest (unit + component tests, jsdom)
npm run build   # esbuild -> dist/ (ESM, React + @abgov left external)

The test suite covers the data-query pipeline, the XLSX writer, the filter model, and renders the Grid / ExcelExport / DatePicker components.

Trademarks and disclaimer

Kendo UI®, KendoReact®, and Telerik® are trademarks of Progress Software Corporation and/or its subsidiaries or affiliates. This project is not affiliated with, endorsed by, sponsored by, or supported by Progress Software Corporation.

References to Kendo UI, KendoReact, and the @progress/* package names are used solely to describe interoperability — that is, to identify the pre-existing APIs this package is a compatible substitute for. No KendoReact or Kendo UI source code is included, bundled, or redistributed by this package; it is an independent implementation built on the Government of Alberta Design System.

This package is provided under the MIT License (see LICENSE.md) "as is", without warranty of any kind.