@maks-it.com/webui-components

Shared React UI components for MaksIT WebUI apps: forms, DataTable, layout, editors, and list views.

Depends on @maks-it.com/webui-core and @maks-it.com/webui-contracts. Peer dependencies must be installed in the host app.

Install

npm install @maks-it.com/webui-components @maks-it.com/webui-core @maks-it.com/webui-contracts
npm install react react-dom react-router-dom lucide-react @tanstack/react-table react-virtualized zod

Components

Export	Purpose
`DataTable`, `DataTableFilter`, `DataTableLabel`	Virtualized server-paged tables
`RemoteSelectBoxComponent`	Async search select (pass `searchRoute` API path)
`SecretComponent`	Secret field with optional generate action
`FormContainer`, `FormHeader`, `FormContent`, `FormFooter`	Form layout shell
`Layout`	App chrome / navigation wrapper
`Offcanvas`	Slide-over panel
`LazyLoadTable`	Incrementally loaded table
`VaultStyleDataTable`, `VaultStyleListSection`	Vault-style list layouts
`EntityScopesSummary`	Entity scope permissions summary
`Toast`, `addToast`	Toast notifications
`FieldContainer`	Label + validation wrapper for fields

Example — DataTable

import { DataTable, createColumns } from '@maks-it.com/webui-components'

const columns = createColumns([
  { key: 'name', header: 'Name' },
  { key: 'createdAt', header: 'Created', label: 'date' },
])

<DataTable
  columns={columns}
  rawd={pagedResponse}
  onPageChange={setPage}
/>

Example — remote select

import { RemoteSelectBoxComponent } from '@maks-it.com/webui-components'

<RemoteSelectBoxComponent
  searchRoute="/api/users/search"
  value={userId}
  onChange={setUserId}
  labelKey="name"
/>

Repository

github.com/MAKS-IT-COM/maksit-webui — src/packages/components

License

MIT

1.9 KiB Raw Blame History