@uikit/uikit

A self-contained, OData-native React UI kit: ~40 themable components, a normalized data-binding layer, a full OData v4 client, a schema-driven form engine with declarative rules, and page templates that turn an entity set into a working screen with one component.

• Zero UI dependencies — React and ReactDOM are the only peers.
• OData v4 first-class — $filter/$orderby/$top/$skip/$select/$expand/$search/$apply, ETag concurrency, Functions & Actions, $batch (JSON v4.01 and multipart v4.0).
• Theming — CSS design tokens (--ui-*), light/dark packs, unstyled mode, and a pt pass-through API for per-slot overrides.
• Enterprise logic, declaratively — rules engine (visible/enabled/required/compute), UI permissions, step-flow actions, saved views.

Install

npm install @uikit/uikit react react-dom

import '@uikit/uikit/styles.css';

Quick start

import { ODataProvider, CrudPage } from '@uikit/uikit';
import '@uikit/uikit/styles.css';

export function App() {
  return (
    <ODataProvider baseUrl="https://services.odata.org/V4/Northwind/Northwind.svc">
      <div className="ui-theme-lara-light">
        <CrudPage
          entitySet="Products"
          title="Products"
          dataKey="ProductID"
          columns={[
            { field: 'ProductName', header: 'Product', sortable: true, filterable: true },
            { field: 'UnitPrice', header: 'Price', sortable: true, filterable: true, filterType: 'number' }
          ]}
          schema={{
            fields: [
              { type: 'text', name: 'ProductName', label: 'Product name', required: true },
              { type: 'number', name: 'UnitPrice', label: 'Unit price', min: 0 }
            ]
          }}
          multiSort
          searchable
        />
      </div>
    </ODataProvider>
  );
}

That one CrudPage is a full master screen: server-driven list (sort/filter/search/paging), create/edit forms, delete, and automatic cache-invalidation refresh.

What's inside

| Layer | Highlights | | --- | --- | | Components | DataTable (virtual scroll, inline edit, grouping + aggregates, column resize, saved views), DynamicForm (validation, wizard steps, conditional fields, repeating line-items), ComboBox/MultiSelect (virtualized), DatePicker, Dialog/Drawer/Tabs/Menu/Toast, AppShell/Sidebar/Breadcrumb, Charts (line/area/bar/pie), KPI tiles | | Templates | ListPage · FormPage · CrudPage · DashboardPage · MasterDetailPage (atomic $batch master+lines) · ReportPage ($apply aggregates + CSV export) | | Data | Normalized DataState ⇄ toODataQuery (Kendo-style binding), in-memory process, pluggable DataSource | | OData | Typed client + hooks (useODataQuery/Entity/Mutation/Batch/Operation), error normalization, built-in cache with entity-set invalidation | | Logic | Rules engine, UI permissions (RBAC), declarative ActionDescriptors (OData operations, custom, multi-step flows) |

Scaffold an app from a service

The companion CLI reads an OData $metadata and generates a navigable multi-entity admin app (AppShell + CrudPages + declared Actions as buttons):

uikit new my-admin --odata https://my-service/odata

Docs

Guides, the roadmap, and design docs live in the repository (docs/). A Storybook catalog covers every component (npm run storybook in the repo).

License

MIT © Sam Abaasi